Question

我希望在画布上绘制一个矩形但是拉伸起点。但是如何擦除在此过程中绘制的前一个矩形。我的意思是如果我的背景颜色是红色，我想在它上面画一个黑色矩形。在擦除橡皮筋期间绘制的中间矩形时，我希望保留背景。

Answer 1

这个问题有点难以理解，但我假设您要做的是使用getImageData和putImageData进行以下操作：

// save the entire canvas (in this example, its 500 x 500) to be restored later
image = context.getImageData(0, 0, 500, 500);

function draw() {
   context.clearRect(0, 0, canvas.width, canvas.height); // clear entire canvas
   context.putImageData(image, 0, 0); // restore entire canvas saved previously
   /** Now, draw other stuff on top of the canvas **/
}

Answer 2

您需要重绘以前占据的黑色矩形的背景部分。重绘整个背景可能更简单。

Answer 3

您只需跟踪要绘制的每个对象，并在每帧中重绘每一个对象。

您可以稍微优化一下这个过程，但必须跟踪绘制的每个内容，以便重绘。

HTML5中的橡皮筋

3 个答案: