用HTML5画布在windows中绘制矩形

Question

我正在用HTML5编写一个画布应用程序。我用触摸和绘画完成了我的铅笔画。现在我试着做一个长方形。对于我所读到的所有主题，我将不得不将所有已完成的形状存储在一个数组中，但是如果这样做，我还必须用普通的绘图存储所有的点，这样我就可以绘制一个矩形，比如窗口绘画。请给我另一个解决方案，绘制矩形像窗口，旧的矩形将消失，新的将取代之前，我做一个“鼠标上”。(预先谢谢:)

Answer 1

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

如果你想保存以前的图纸..。

在鼠标向下：

• 保存鼠标位置(startX/startY)。
• 设置指示已启动拖动的标志(isDown=true)

用摩丝表情：

• 如果是isDown==false，不要做任何事情(返回)
• 否则，清理画布。
• 重新绘制所有以前的绘图(从保存的点数组，等等)
• 从开始到鼠标位置绘制当前的rect -- context.strokeRect(startX，startY，mouseX-startX，mouseY-startY)

在老鼠上：

• 清除拖动标志(isDown=false)

如果你想用两张画布.

作为存储以前每幅画的另一种选择，您可以使用两个画布。一个画布用于绘制当前矩形，另一个画布用于保存所有以前绘制的项目--这里有一个使用两个画布的示例，这样您就不必存储以前的绘图: jsfiddle.net/m1erickson/V9J5J/