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>

相关阅读:
VINS-Mono-后端优化（三：视觉雅可比推导）
DB2 设置explain
双靶向融合蛋白标记的红细胞膜包裹PLGA微球/细胞膜拮抗联合纳米酶的仿生制备
TCP协议详细图解（含三次握手、滑动窗口等十大机制）
DBeaver线下数据导入数据库表
论文阅读 AutoGluon-Tabular
ASO优化之应用程序图标的设计技巧
openssl + 3DES开发实例（linux）
数据结构与算法 | 二叉树(Binary Tree)
安卓优化策略

原文地址：https://blog.csdn.net/weixin_44786530/article/details/133963790