canvas-视频绘制

最新推荐文章于 2025-04-01 09:19:51 发布

十里夜

最新推荐文章于 2025-04-01 09:19:51 发布

阅读量1.2k

点赞数 2

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.youkuaiyun.com/hgyu_962464/article/details/54893201

版权

canvas 专栏收录该内容

13 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas-视频绘制</title>
    <style>
        #canvas{
            float: left;
            border: 1px solid palevioletred;
        }
    </style>
</head>
<body>
    <!--controls="controls" 显示控制按钮 -->
    <video id="movie" controls="controls" width="800" >
        <source src="./image/movie.webm">
    </video>
    <canvas id="canvas" width="500px" height="600px">
    </canvas>
    <script>
        //获取到canvas元素
        var canvas = document.getElementById('canvas');
        //获取canvas中的画图环境
        var context = canvas.getContext('2d');

        //获取视频对象
        var movie = document.getElementById('movie');

        window.onload = function (){
            movie.play();//开始播放视频
            //将视频逐帧添加到canvas中。
            //window.webkitRequestAnimationFrame(animate); //谷歌浏览器,参数是一个回调函数
           // window.oRequestAnimationFrame(animate) //Opera浏览器,参数是一个回调函数
           // window.mozRequestAnimationFrame(animate)//火狐浏览器,参数是一个回调函数
            window.requestAnimationFrame(animate); //W3C标准,参数是一个回调函数
        }

        //视频播放函数
        function animate(){
            //判断视频是否播放完毕
            if(!movie.ended){
                //绘制图像帧
                context.drawImage(movie,0,0,500,300);
                context.drawImage(movie,0,300,500,300);
                //回调自身：视频播放函数
                window.requestAnimationFrame(animate);
            }else{
                context.textAlign = 'center';
                context.textBaseline = 'middle';
                context.font = '50px 楷体';
                context.fillStyle = 'red';
                context.fillText("播放完毕！",canvas.width/2,canvas.height/2);

            }
        }
    </script>
</body>
</html>