如何在HTML5画布上交互式绘制形状?

时间:2012-05-03 08:33:00

标签: javascript html5 canvas shapes mouse-cursor

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

有关如何使用JavaScript实现此目的的任何想法?

由于

2 个答案:

答案 0 :(得分:0)

Canvas绝对不知道你正在绘制的物体的本质。这意味着比调用arc方法之后,所有你得到的只是屏幕上的一堆像素。

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

第二种方法是使用SVG而不是画布,并从框中获得对象模型。

答案 1 :(得分:0)

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