canvas做动图以及配合video标签操作视频

动图

canvas的drawImage()方法很强大，第一个参数可以是图片，可以是canvas，还可以是video。做动图主要是用到它的裁剪效果，也就是传参的不同，裁剪效果有9个参数，drawImage(原图，从原图哪里开始裁剪x坐标，y坐标，裁剪宽度，裁剪高度，从画布哪里开始画x坐标，y坐标，缩放宽度（对比裁剪宽高），缩放高度)

实现代码

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = './images/tmac_gif.gif';
img.onload = function(){
    var i = 0;
    setInterval(function(){
        i++;
        i = i%13;
        //裁剪图片(源，从原图哪里开始裁剪x坐标，y坐标，要裁剪宽度，高度，在画布上开始x坐标，y坐标，裁剪后缩放对比裁剪的宽高)
        ctx.drawImage(img, 241*i, 0, 241, 150, 200, 100, 241, 150);
    }, 160)
}

效果

操作视频

这里主要有两点

1、用requestAnimationFrame()制作动画，浏览器会自动判断请求一帧，而不需要想定时器那样手动设置时间间隔。

2、getImageData()获取当前图像像素信息，其中data属性是一个每个像素点的rgba数值数组集合，比如该图像有两个像素且都是黑色的，那getImageData().data就是[0, 0, 0, 255, 0, 0, 0, 255]。

下面简单实现一下将视频变成黑白

var canvas = document.getElementById('canvas');
var video = document.querySelector('video');
var playPause  = document.querySelector('.play-pause');
var ctx = canvas.getContext('2d');

playPause.onclick = function(){
    // console.log(video.paused);
    if(video.paused){       //当前视频暂停
        video.play();
        this.innerHTML = '暂停';
    }else{
        video.pause();
        this.innerHTML = '播放';
    }
}

function next(){
    //向浏览器请求一帧
    requestAnimationFrame(function(){
        //绘图
        ctx.drawImage(video, 0, 0);
        //获取画面像素信息，得到一个每个像素点的rgba值得数组，需要运行在服务端
        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var data = imgData.data;
        // console.log(imgData);
        for(var h=0; h

效果