通过Canvas元素来实时绘制一个视频帧,并在视频帧上叠加一个图片的功能可以当作水印。
-
获取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上的图像。
let video = document.querySelector("video")
,可以通过querySelector
获取页面中的视频元素,上面的为动态创建视频元素。- 由于视频加载和播放可能需要一些时间,因此在实际应用中,可能需要添加一些额外的逻辑来处理视频未就绪或未播放完成的情况。例如,可以在绘制前检查视频的
readyState
属性,或者监听视频的loadedmetadata
、canplaythrough
等事件。 - 代码中使用的相对路径(如
'./视频-css/横版-原神-昼.mp4'
)需要确保与HTML文件相对的位置正确,否则视频将无法加载。
下面是效果图