如何使用html-canvas标签绘制视频？

Question

我想知道如何使用Javascript和画布“绘制”图像（下面显示的示例）？ “绘制”，意思是图像将随着鼠标移动，并且每次鼠标改变位置时重复放置自己。

编辑：好的，所以缩小我的问题。基本上，我想知道如何使用画布标签“绘制”图像？我将如何“画”与视频对象？

Answer 1

这是相当直截了当：

• 加载图像
• 让您的鼠标COORDS
• 这些COORDS绘制图像
• 使用CSS定位的元素

重点是不清除你的画布。

canvas.onmousemove = draw; 
 
var ctx = canvas.getContext('2d'); 
 
var img = new Image; 
 
img.src = 'http://lorempixel.com/50/50?'+Math.random(); 
 
function draw(e){ 
 
    var rect = canvas.getBoundingClientRect(); 
 
    var x = e.clientX-rect.left-img.width/2; 
 
    var y = e.clientY-rect.top-img.height/2; 
 
    ctx.drawImage(img, x, y, img.width, img.height); 
 
    }

canvas{position: absolute; z-index:1;} 
 
#up{z-index:2; background-color:rgba(125,0,125,.5);} 
 
p{position: relative; background-color:rgba(0,125,125,.5); color:#ccc}

<canvas id="canvas" width=500 height=500></canvas> 
 
<p id="up">There is something behind me</p> 
 
<p id="down">There is something above me</p>