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

Question

我想知道我怎么能＆＃34;画＆＃34;使用Javascript和画布的图像（如下所示）？ ＆＃34;绘图，＆＃34;在某种意义上说，图像会跟随鼠标，并在每次鼠标改变位置时重复放置。

编辑：好的，所以要缩小我的问题范围。基本上，我想知道我如何画画＆＃34;使用canvas标签的图像？我将如何画画＆＃34;用视频对象？

Answer 1

这很直接：

• 加载图片
• 获取鼠标的坐标
• 在这些坐标上绘制图像
• 使用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>