将图片绘制到画布上 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas1" width="600" height="400"></canvas>
        <video  width="600" height="" src="img/gaoxiao.mp4"   hidden="hidden">
        
        </video>
        
        <button>开始播放</button>
        <script type="text/javascript">
            var canvas1 = document.querySelector('#canvas1')
            var ctx = canvas1.getContext('2d')
            var v1 = document.querySelector('video')
            
            var logoImg = new Image()
            logoImg.src = 'img/logo.png'
            
//            document.querySelector('video').autoplay = true;
            
//            //绘制图片，所以要首先由图片对象
//            var img = new Image()
//            img.src = 'img/mobile.jpg'
//            //必须要等待图片加载完毕才能绘制图片
//            img.onload = function(){
//                ctx.drawImage(img,100,100,300,400)
//            }
            
            function drawVideo(){
                setInterval(function(){
                    //可以绘制图片，也可以绘制视频
                    ctx.drawImage(v1,0,0,600,400)
                    ctx.drawImage(logoImg,50,50,100,50)
                    //绘制文字
                    ctx.textAlign = 'center'
                    ctx.font = '50px 微软雅黑'
                    ctx.fillStyle = 'skyblue'
                    ctx.fillText('这是一个百度',100,100)
                },20)
            }
            
            
            document.querySelector('button').onclick = function(){
                document.querySelector('video').play()
                drawVideo()
            }
            
            
            
        </script>
        
        
    </body>
</html>

 

posted @ 2019-03-18 21:51  就这样子吧  阅读(1183)  评论(0)    收藏  举报