html5＜canvas在画布上画视频和图片>

最新推荐文章于 2025-06-14 10:17:00 发布

sensus森森

最新推荐文章于 2025-06-14 10:17:00 发布

阅读量9.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML4/HTML5 文章标签：视频图片

本文链接：https://blog.youkuaiyun.com/qq_27682041/article/details/72779255

HTML4/HTML5 专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素在画布上绘制视频流和静态图片，探讨其基本步骤和技术要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        canvas{
         background:#ccc;
        }
        </style>
        <script>
            window.onload = function(){
                var canvas = document.getElementById('canvas');
                var cobj = canvas.getContext('2d');//获取绘图环境
                var img = document.getElementsByTagName('img')[0];
                var video = document.getElementsByTagName('video')[0];
                cobj.drawImage(img, 200, 200, 200, 200);//把图片画在画布上
                canvas.onclick = function(){
                    video.play();
                    video.addEventListener('play', function(){
                        //画布上画视频，需要动态地获取它，一帧一帧地画出来
                        setInterval(function(){
                            cobj.drawImage(video, 0, 0, 200, 200);
                        }, 20);
                    });
                }
            }
        </script>
    </head>
    <body>
    <canvas id="canvas" width=600 height=600>
    </canvas>
    <img src="./images/01.jpg" hidden/>
    <video src="./images/iceage4.mp4"></video>
    </body>

</html>