使用HTML5画布绘制矩形，就像在windows中绘制程序一样

Question

我正在用HTML5编写带有画布的绘画应用程序。 我用触摸和绘画完成了我的铅笔画。 而现在我正在尝试制作一个矩形。对于我已阅读的所有主题，我将必须将所有完成的形状存储在一个数组中，但如果我这样做，我还必须使用普通绘图存储所有点，以便我可以绘制一个像窗口一样的矩形绘画。 请给我另一个解决方案来绘制像窗户一样的矩形，旧的矩形将消失，新的一个将替换，然后我做一个“鼠标向上”。 提前谢谢：）

Answer 1

您需要保存以前的图纸或使用2幅画布。

如果您想保存以前的图纸......

在mousedown：

• 保存鼠标位置（startX / startY）。
• 设置一个标志，指示拖动已开始（isDown = true）

在mousemove中：

• if isDown == false，不要做任何事情（返回）
• 否则，清除画布
• 重绘所有以前的图纸（来自您保存的点阵列等）
• 从开始到鼠标位置绘制当前rect - context.strokeRect（startX，startY，mouseX-startX，mouseY-startY）

在mouseup中：

• 清除拖拽标志（isDown = false）

如果你想使用2幅画布......

作为存储每个先前绘图的替代方法，您可以使用2幅画布。一个画布用于绘制当前矩形，另一个画布用于保留所有先前绘制的项目以下是使用2个画布的示例，因此您不必存储以前的绘图：jsfiddle.net/m1erickson/V9J5J /