canvas-视频绘制

来源：互联网发布：范剑青知乎编辑：程序博客网时间：2024/05/16 13:05
<!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>
0 0