如何在 HTML5 画布上以交互方式绘制形状？答案

【问题标题】：How to draw shapes interactively on top of a HTML5 canvas?如何在 HTML5 画布上以交互方式绘制形状？
【发布时间】：2012-05-12 18:07:15
【问题描述】：

我需要用鼠标在 HTML5 画布上绘制一个形状，比如正方形或圆形；并且它应该是可调整大小的，然后，当用户完成绘图时，画布内的形状的坐标应该是可检索的。

关于如何使用 JavaScript 实现这一点的任何想法？

谢谢

【问题讨论】：

【解决方案1】：

Canvas 绝对不知道您正在绘制的对象的性质。这意味着在调用 arc 方法之后，你得到的只是屏幕上的一堆像素。

这里有两种方法 - 您可以在画布上编写自己的对象模型包装器。每次你要画东西时，你应该存储对象信息——形状、坐标和其他任何需要的东西。这是一种相当不错的方法，但请注意——它并不像人们想象的那么微不足道。

第二种方法是使用 SVG 而不是画布，并从盒子中获取对象模型。

【讨论】：

【解决方案2】：

您可能对 JavaScript 库 Paper.js 感兴趣。解释网站介绍 - “这提供了一个使用 HTML 5 Canvas 的矢量图形框架”

【讨论】：