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);

是否可以清除以前绘制的像素？

我的第二个问题是：是否真的没有比得到和putImageData（）更好的方法，这是非常劳动密集型的？

编辑：特别是有一个div包含背景图像技巧，可能没有get和putImageData调用吗？

谢谢！

Answer 1

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

改为使用context.clearRect(x,y,10,10);。

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

Html 5画布和背景

1 个答案: