视频并且在视频上加上自定义logo"/>
canvas绘制动态视频并且在视频上加上自定义logo
实现的效果：可以在画布上播放动态视频，并且加上自定义的图片logo放在视频的右下角
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>绘制视频</title></head><body><div>绘制视频</div><canvas id="myCanvas" width="500" height="350"></canvas><button id="player" style="display: block">暂停/播放</button><script>// 获取画布const canvas = document.getElementById('myCanvas')// 获取画笔const ctx = canvas.getContext('2d')// 获取视频// const video = document.querySelector('video')const video = document.createElement('video')video.src = './assets/video.mp4'const logo = new Image()logo.src = './assets/ball.png'// 获取按钮const btn = document.querySelector('#player')btn.onclick = () => {// 判断视频是否在播放if (video.paused) {video.play()} else {video.pause()}renderVideo()}// 绘制视频const renderVideo = () => {// 绘制视频ctx.drawImage(video, 0, 0, 500, 350)// 还可以继续绘制一个logo// ctx.drawImage(logo, 460, 320, 40, 30)requestAnimationFrame(renderVideo)}</script></body>
</html>
更多推荐
canvas绘制动态视频并且在视频上加上自定义logo
发布评论