哪个HTML 5 Canvas Javascript用于制作交互式绘图工具？

Question

我正在尝试使用html 5 canvas开发绘图工具。当我搜索一个很好的HTML 5 javascript库时，其中大多数都专注于生成静态图像或动画。 我正在寻找的是能够绘制矩形，圆形等原始形状，并为它们添加点击事件。我也应该能够使用句柄转换形状。

我知道我可能需要定制一些框架，但仍然......如果有一个具有这些功能的现有框架，那么很高兴知道。感谢

[编辑] 谢谢你的回复。顺便说一句，我在某些地方读到SVG对于我计划做的所有互动内容都比画布好。现在我完全糊涂了:(

Answer 1

<强> Paper.js

根据他们的网站：

  

Paper.JS是一个在HTML5 Canvas之上运行的开源矢量图形脚本框架。

和

  

为您可以执行的不同操作提供鼠标处理程序   鼠标（或触摸屏）。

<强> three.js所

javascript中的另一个图形库是three.js。根据他们的网站：

  

该项目的目标是创建一个轻量级的3D库   非常低的复杂程度 - 换句话说，对于假人。该   library提供canvas，svg和WebGL渲染器。

我不确定在库中处理鼠标事件的支持有多好。以下SO问题涉及一个示例：Event handling for geometries in Three.js?

Answer 2

这看起来非常适合您的需求：http://fabricjs.com/demos/

以下是您可以使用鼠标移动和调整大小的简单方块的示例：http://fabricjs.com/controls/

来自http://fabricjs.com/：

  

使用Fabric.js，您可以在画布上创建和填充对象;   对象像简单的几何形状 - 矩形，圆形，   椭圆，多边形或由数百或数组成的更复杂的形状   成千上万的简单路径。

     

然后，您可以使用鼠标缩放，移动和旋转这些对象;   修改它们的属性 - 颜色，透明度，z-index等。你可以   也完全操纵这些对象 - 用简单的方法对它们进行分组   小鼠选择。

Answer 3

KineticJS

现场描述：

  

KineticJS是一个HTML5 Canvas JavaScript框架，支持桌面和移动应用程序的高性能动画，转换，节点嵌套，分层，过滤，缓存，事件处理等等。

它可以绘制原始形状（矩形，圆形，甚至斑点） 它有许多事件处理程序（点击，悬停，拖动等）
然后你也可以动画它们（移动，旋转，缩放）
您也可以应用滤镜（灰度，模糊，反转）

你可以找到很多examples and tutorials here，这里有一个截图：

---

编辑

不再维持KineticJS。

您还应该尝试Paper.js或Raphaël。