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