Javascript Canvas - 拖放绘制矩形

Question

我希望能够通过单击并拖动在 JavaScript Canvas 上绘制一个矩形。

当我拖动以更改大小时，我需要能够看到矩形，因为我像“橡皮筋”一样拖动，因为我听说它被称为“橡皮筋”。然后它在 mouseup 上创建。

我在这方面遇到了严重的困难，非常感谢任何帮助，谢谢!

Answer 1

要研究的算法是

1. 使用动画帧回调来清除并向 Canvas 写入新的矩形。 (参见requestAnimationFrame)

2. 在 Canvas 上使用 mousedown 和 mouseup 事件来启动跟踪鼠标移动。 mousedown 事件可以启动动画调用来绘制 1x1 像素矩形。

3. mousemove 事件记录鼠标的位置，供动画帧绘制代码使用 - 如果没有待处理的回调，则可能会调用 requestAnimationFrame。

4. 如果您可以清除 Canvas 上之前的内容来创建橡皮筋效果，则鼠标按下时最后绘制的矩形就是结果。

5. 如果需要保留现有内容，请研究在鼠标按下时复制 Canvas ，并在绘制新矩形之前将其复制回 Canvas 。查看类似 how to copy a canvas locally 的问题和/或how to (deep) clone a canvas

祝你编码愉快，还有很多东西要学!