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)
}

效果