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 。