持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

前言

在这个短视频流行的时代，打开手机就会打开各种短视频软件，于是乎就会打开 快乐肥宅水刷起自己喜欢的视频，哈哈哈。而在前端领域，canvas是不得不提到的HTML元素，那要怎么样将canvas和短视频联系起来呢，想到这里，哎，我们可以用canvas去复刻视频呀。嗯，就是这样，撸起袖子加油干。

必备知识点及其作用

在做之前我们需要讲点知识，并且需要搞懂它的作用，知其然知其所以然。混个眼熟，免得百度了。

使用drawImage将视频的每一帧绘制在canvas里面
使用getImageData获取到上一步绘制的图片的像数点数据
使用clearRect清除掉根据像数点绘制的图片
使用requestAnimationFrame重复绘制

实现思路

我们在html里面放置一个video标签和canvas标签
在js里面获取到这两个标签，另外我们需要再创建一个canvas标签，用来盛放视频的每一帧图片
我们在将视频的每一帧图片转成像素点数据（这个是个数组），然后再循环这个数组，重复绘制即可

代码

//html
    <video src="./v0300fg10000ccbd2v3c77u8pbp4h7fg.MP4" oncanplay="init()" width="200px"></video>
    <canvas id="canvas2" onclick="video.play()"></canvas>
//js
 const canvas1 = document.createElement("canvas")
    const canvas2 = document.querySelector("#canvas2")
    const video = document.querySelector("video")
    const init = () => {
        const ctx = canvas1.getContext('2d');
        const ctx2 = canvas2.getContext("2d")
        canvas2.height = canvas1.height = video.offsetHeight;
        canvas2.width = canvas1.width = video.offsetWidth;
        const playVideo = () => {
            requestAnimationFrame(playVideo);
            const { width, height } = canvas1;
            ctx.drawImage(video, 0, 0, width, height);
            const data = ctx.getImageData(0, 0, width, height).data;
            ctx2.clearRect(0, 0, width, height);
            for (let i = 0; i < data.length; i += 4) {
                const x = parseInt((i + 1) % (width * 4) / 4);
                const y = parseInt(i / (width * 4));
                ctx2.fillStyle = `rgba(${data[i + 1]},${data[i + 1]},${data[i + 2]},${data[i + 3] / 255})`;
                ctx2.fillText('¥', x, y)
            }

        }
        playVideo()

    }

知识补充

补充一下关于getImageData这个知识点吧，它的作用就是用来获取canvas某个矩形区域的像数点数据。包含了三个属性，width，height，data，而data得到的就是像数点数组了，在这个数组中，四个成员数据组成一个像素点，比如有一个黑色和白色的像素，得到的数据应该是这样的。[0,0,0,255,255,255,255,255],注意：getImageData按照从左到右，从上到下的顺序去存储像素点信息的,但是用css是用 rgba(0,0,0,1)和rgba(255,255,255,1) 来表示的，所以在转换的时候需要注意下。

canvas复刻视频

前言

必备知识点及其作用

实现思路

代码

知识补充