Question

我在这里可以移动三角形/矩形的照片：http://jsfiddle.net/b29hxxma/现在我想用视频替换照片，但有可移动的形状，请看这里：http://jsfiddle.net/alwaysgreat/ez1orho1/但不知何故它不起作用。我尝试了很多，甚至能够绘制形状但不能使它可移动。请帮助。编码（从某处获取）我曾经绘制形状但不能在视频上移动：

function draw() {
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.drawImage(v, 5, 5, 260, 125);
ctx.clearRect(135, 92, 126, 34);
ctx.beginPath();
ctx.rect(135, 92, 126, 34);
ctx.fillStyle = 'pink';
ctx.fill();
setTimeout(function(){ draw(v,5, 5, 260, 125); }, 20);
}
draw();

Answer 1

对于视频上的可移动矩形，您可以使用此代码（改编自您的第二个JSFiddle链接）：

var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var mouseX = 135;
var mouseY = 92;

function draw() {
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.drawImage(v, 5, 5, 260, 125);
  ctx.beginPath();
  ctx.rect(mouseX, mouseY, 126, 34);
  ctx.fillStyle = 'pink';
  ctx.fill();
  setTimeout(function(){ draw(v,5, 5, 260, 125); }, 20);
}


function findOffset(obj) {
  var curX = 0,
  curY = 0;
  if (obj.offsetParent) {
    do {
      curX += obj.offsetLeft;
      curY += obj.offsetTop;
    } while (obj = obj.offsetParent);

    return {
      x: curX,
      y: curY
    };
  }
}

window.addEventListener('mousemove', function(event) {
  var offset = findOffset(c);
  mouseX = event.pageX - offset.x;
  mouseY = event.pageY - offset.y;
}

draw();

代码将在鼠标位置的视频顶部绘制一个矩形。它的工作原理是从onmousemove函数保存鼠标位置，然后在调用绘图函数时，它会在该位置绘制矩形。

在画布问题中绘制三角形

1 个答案: