canvas二三事之签名板与视频绘制

Posted 2021-11-05 xuejiangjun

今天，不知道怎么的就点开了语雀，然后就看到了《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，真香！