HTML5 中的橡皮筋答案

【问题标题】：Rubber Banding in HTML5HTML5 中的橡皮筋
【发布时间】：2011-11-30 06:39:39
【问题描述】：

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

【问题讨论】：

【解决方案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 **/
}

【讨论】：

我正在尝试制作类似记事本的东西。所以将图像数据放慢我的绘图我的意思是整个画布，首先获取图像数据。然后在每次鼠标移动时放置图像数据？
我认为您在实际尝试之前不会知道。另外，你也可以试试drawImage，而不是putImageData，看看哪个更快。

【解决方案2】：

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

【讨论】：

但我不确定背景是由什么组成的。背景有什么颜色，背景中是否有其他线条或元素

【解决方案3】：

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

您可以稍微优化该过程，但您必须跟踪绘制的每件东西，以便重新绘制。

【讨论】：