在 canvas 上制作图像 "move"

Question

所以我试图让图像看起来好像在移动 canvas 并在下一次绘制时恢复之前的背景。

绘制基本矩形时，以下测试有效。

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');
var x = 10,  = 10, w = 50, h = 50;
var vx = 2;
var vy = 2;
var back = ctx.getImageData(1,1,1,1);
function draw() {
  ctx.putImageData(back,x, y);
  x += vx;
  y += vy;
  back=ctx.getImageData(x, y, w, h);
  ctx.fillRect(x, y, w, h);
}
setInterval(draw, 1000/60);

然而，当如下所示用矩形替换图像时，它似乎没有显示 point.png，而是 "back" 的图像数据似乎在移动。

 var canvas = document.querySelector('canvas'),
   ctx = canvas.getContext('2d');
 var x = 10,
   y = 10,
   w = 50,
   h = 50;
 var vx = 2;
 var vy = 2;
 var back = ctx.getImageData(1, 1, 1, 1);

 function draw() {
   ctx.putImageData(back, x, y);
   x += vx;
   y += vy;
   back = ctx.getImageData(x, y, w, h);
   var img = document.getElementById("point");
   ctx.drawImage(img, x, y, w, h);
 }
 setInterval(draw, 1000 / 60);

任何人都可以告诉我我做错了什么以及如何解决这个问题吗？

Answer 1

检查控制台，你应该会看到类似的东西

`Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.`

在 canvas 中插入一些外部数据后，您将无法再访问其内容。图片必须与页面同源。

在 canvas 上制作图像 "move"

Making an image "move" on canvas

javascript

html5-canvas