Canvas实现视频绘制与图片叠加

创作时间:

作者:

@小白创作中心

Canvas实现视频绘制与图片叠加

引用

CSDN

https://blog.csdn.net/m0_59508634/article/details/140880558

本文将介绍如何使用HTML5 Canvas元素实时绘制视频帧，并在视频帧上叠加图片（例如水印）。通过本文，你将学习到Canvas的基本操作、视频和图片的加载方法，以及如何使用requestAnimationFrame实现动画效果。

实现步骤

获取Canvas元素

let canvas = document.getElementById('canvas')

通过getElementById函数获取页面中ID为canvas的Canvas元素，并将其存储在变量canvas中。

检查Canvas是否支持getContext方法

if(canvas.getContext){

检查Canvas元素是否支持getContext方法，这是绘制图形和图像的基础。

获取2D渲染上下文

let context = canvas.getContext('2d')

通过Canvas的getContext方法获取一个2D渲染上下文（context），用于后续的绘图操作。

获取按钮元素

let btn = document.getElementById('btn')

通过getElementById函数获取页面中ID为btn的按钮元素，并将其存储在变量btn中。

创建视频元素并设置其源

let video = document.createElement("video")
video.src = './视频-css/横版-原神-昼.mp4'

动态创建一个video元素，并设置其src属性为指定视频文件的路径。注意，这里使用的是相对路径。

创建并设置图片元素

let img = new Image()
img.src = "./视频-css/BgSub_favicon.png"

通过new Image()创建一个新的图片元素，并设置其src属性为指定图片的路径。同样，这里使用的是相对路径。

为按钮添加点击事件监听器

btn.onclick = function(){
    video.play()
    render()
}

为按钮添加了一个点击事件监听器，当按钮被点击时，会调用video.play()来播放视频，并调用render函数开始绘制。

绘制函数（render）

function render(){
    context.drawImage(video,0,0,600,300)
    context.drawImage(img,30,30,80,80)
    requestAnimationFrame(render)
}

render函数负责绘制操作。首先，使用context.drawImage方法将视频帧绘制到Canvas上，并指定其位置和大小（0,0,600,300）。然后，在同一Canvas上绘制图片，并指定其位置和大小（30,30,80,80）。最后，使用requestAnimationFrame(render)实现动画效果，即不断调用render函数以更新Canvas上的图像。

注意事项

可以通过querySelector获取页面中的视频元素，上面的为动态创建视频元素。
由于视频加载和播放可能需要一些时间，因此在实际应用中，可能需要添加一些额外的逻辑来处理视频未就绪或未播放完成的情况。例如，可以在绘制前检查视频的readyState属性，或者监听视频的loadedmetadata、canplaythrough等事件。
代码中使用的相对路径（如'./视频-css/横版-原神-昼.mp4'）需要确保与HTML文件相对的位置正确，否则视频将无法加载。