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

最新推荐文章于 2024-08-02 22:58:13 发布

samfung09

最新推荐文章于 2024-08-02 22:58:13 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： canvas 文章标签： canvas drawImage video 动图

本文链接：https://blog.youkuaiyun.com/samfung09/article/details/81366964

canvas 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何利用canvas的drawImage方法创建动图，重点在于裁剪效果的参数运用。同时，探讨了如何操作video标签，通过requestAnimationFrame()实现动画，并利用getImageData()获取像素信息来将视频转化为黑白效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动图

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<canvas.height; h++){     //canvas高
            for(var w=0; w<canvas.width; w++){      //canvas宽
                //每个像素rgb的平均值
                var avg = Math.floor((data[(h*canvas.width+w)*4]+data[(h*canvas.width+w)*4+1]+data[(h*canvas.width+w)*4+2])/3);
                //每个像素的rgb值都设为平均值，达到中间灰效果
                data[(h*canvas.width+w)*4]=data[(h*canvas.width+w)*4+1]=data[(h*canvas.width+w)*4+2] = avg;
            }
        }
        //将修改后的像素信息放回去
        ctx.putImageData(imgData, 0, 0);
        next();
    })
}
next();

效果