如何使用 html-canvas 标签用视频画图？

Question

我想知道如何使用 Javascript 和 canvas 对图像（示例如下）进行 "draw"？ "Draw," 在某种意义上，图像会跟随鼠标并在每次鼠标改变位置时重复放置自己。

编辑： 好的，缩小我的问题范围。基本上，我想知道如何使用 canvas 标签对图像进行 "draw"？我如何 "draw" 使用视频对象？

Answer 1

这很简单：

加载图片
获取鼠标的坐标
在这些坐标处绘制图像
使用 CSS 定位您的元素

重点是不要清除您的 canvas。

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>

如何使用 html-canvas 标签用视频画图？

How to draw with video using html-canvas tag?

html

javascript

jquery

html5-canvas