HTML 5画布和背景

Question

在尝试了几种方法来在绘制运动矩形的画布下保留背景（不复制动画代码）之后，这是我的最佳尝试：

canvas {background-image:url('background.png');}

var x,y, pixels;
function draw() {
  if(pixels) {
    context.putImageData(pixels,x,y);
  }
  x = //calculate new X
  y = //calculate new Y
  pixels = context.getImageData(x, y, 10, 10);
  context.fillStyle = 'red';
  context.fillRect(x, y, 10, 10);
}

我的第一个问题是：为什么不将draw（）的前两行替换为：

context.fillStyle = 'rgba(10,10,10,0)';
context.fillRect(x,y,10,10);

清除先前绘制的像素？

我的第二个问题是：真的没有比get和putImageData（）更好的方法了，这是非常费力的工作？

编辑：特别是是否有一个包含背景图像技巧的div，它可能在没有get和putImageData调用的情况下可以工作？

谢谢！

Answer 1

默认情况下，您绘制的所有内容都会相互绘制，而不是被替换。

使用context.clearRect(x,y,10,10); 代替。

还有context.globalCompositeOperation属性，可以在使用fillRect ..之前将其设置为"destination-out" ，但是最好使用clearRect 。