今天,不知道怎么的就点开了语雀,然后就看到了《HTML5 Canvas 教程》,开始了canvas的研究(学习)之旅。
首先,想到的第一个东西就是签名板,上代码:
<canvas id="canvas" width="600" height="600"></canvas> <button onclick="clearCtx()">clear</button>
var canvas = document.querySelector(‘#canvas‘); var ctx = canvas.getContext(‘2d‘); var canWrite = false; //是否可以写的状态 canvas.addEventListener(‘mousedown‘, function(e){ canWrite = true; ctx.beginPath(); ctx.moveTo(e.offsetX, e.offsetY); ctx.lineTo(e.offsetX, e.offsetY); ctx.lineWidth = 5; ctx.lineCap = ‘round‘ ctx.stroke(); }) canvas.addEventListener(‘mousemove‘, function(e){ //这里必须是按下鼠标再移动的时候才能划线 if(canWrite){ ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); } }) canvas.addEventListener(‘mouseup‘, function(e){ canWrite = false; }) canvas.addEventListener(‘mouseleave‘, function(e){ canWrite = false; }) //清除画布 function clearCtx(){ ctx.clearRect(0, 0, canvas.width, canvas.height) }
大致方法就是这样,移动端的话修改一下对应的事件就行了,这是今天的第一个demo。
然后继续学习,看到了createPattern填充纹理,这里canvas填充图片,这里也是语雀的一个例子:
<canvas id="canvas" width="600" height="600"></canvas>
var canvas = document.querySelector(‘#canvas‘); var ctx = canvas.getContext(‘2d‘); var img = new Image(); img.src = "http://airing.ursb.me/edu8-1.jpg"; img.onload = function(){ var pattern = ctx.createPattern(img, "repeat"); ctx.fillStyle = pattern; ctx.fillRect(0,0,600,600); }
emmm,真香!
然后我前几天看到了canvas绘视频,刚好createPattern第一个参数也可以是video对象,索性就探索了一波,然后碰壁了。。。
大概意思就是createPattern它绘画的是源视频,而源视频是1920*1080,目标canvas对象的尺寸是600*600,所以绘画出来就只能画到源视频的一部分,让人头痛。
然后采用的第二种方案,drawImage!完美。
<canvas id="canvas" width="600" height="600"></canvas> <button onclick="playVideo()">play</button> <button onclick="stopVideo()">stop</button>
//获取canvas对象 var canvas = document.querySelector("#canvas"); //获取context var ctx = canvas.getContext("2d"); //画布开始的x,y坐标 var startX = 0; var startY = 0; //创建video对象 var video = document.createElement("video"); //这里借用阿里云的视频 video.src = "https://videocdn.taobao.com/oss/taobao-ugc/c70d06b360964d9a8500f85213ea7238/1483532956/video.mp4"; video.preload = "preload"; video.autoplay = "autoplay"; video.muted = true; video.loop = true; var interval = null; var videoWidth = canvas.width; var videoHeight = canvas.height; //视频加载完成获取视频原始宽高 video.onloadeddata = function() { //做视频缩放 if (video.videoWidth > canvas.width || video.videoHeight > canvas.height) { if (video.videoWidth / video.videoHeight > canvas.width / canvas.height) { videoWidth = canvas.width; videoHeight = Math.round( canvas.width * (video.videoHeight / video.videoWidth) ); startX = 0; startY = (canvas.height - videoHeight) / 2; } else { videoWidth = Math.round( canvas.height * (video.videoWidth / video.videoHeight) ); videoHeight = canvas.height; startX = (canvas.width - videoWidth) / 2; startY = 0; } } //根据缩放设置视频新的宽高 video.width = videoWidth; video.height = videoHeight; }; function playVideo() { //画视频 ctx.drawImage(video, startX, startY, video.width, video.height) interval = requestAnimationFrame(playVideo) video.play(); } function stopVideo() { cancelAnimationFrame(interval) interval = null; }
codepen地址:https://codepen.io/anon/pen/VNNOyw
不由得感叹一句:啊,canvas,真香!
原文地址:https://www.cnblogs.com/xuejiangjun/p/10796773.html
时间: 2024-10-03 07:40:21