Question

因此，我试图使图像看起来像是在移动并且画布上，并在下次绘制时恢复之前的背景。

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

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而是显示＆＃34;返回＆＃34;似乎有所动作。

 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.`

在画布中插入一些外部数据后，您将无法再访问其内容。图像必须与页面具有相同的原点。

制作图像＆＃34;移动＆＃34;在画布上

1 个答案: