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

爱被打了一巴掌 2022-06-15 07:25 438阅读 0赞

<!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>

![Image 1][]![Center][]

[Image 1]: 
[Center]: /images/20220615/dd07593e2eaa45a19cc70b0878982d89.png