以交互方式绘制到<div> </div>上

Question

我正在构建一个Web应用程序，用户可以在其中将区域（多边形）绘制到视频上。我已经实现的解决方案是在视频播放器上放置<div>，点击鼠标。

我现在愿意做的是能够用鼠标绘制<div>：

• 点击块以绘制点
• 一个按钮，绘制区域，它将使用现有点填充多边形
• 一个按钮删除画布，它会重置块

我正在寻找有关使用哪个库的说明。已经听说过：

• Raphael（raphaeljs.com/#demo）
• jsDraw2D（jsdraw2d.jsfiction.com/demo/linepolygon.htm）

---

问题

拉斐尔看起来很怪异，但对我想做的事情有点过分。而恰恰相反，jsDraw2D似乎从我测试的内容中运行得很好（虽然只是手动绘制）。

我有几个限制，例如：

• 用户使用鼠标绘制点（通过单击）
• 用户正在使用不透明度的<div>上绘图（填充的多边形也应该是透明的）
• 我需要存储点的坐标（或至少是多边形）

---

问题

我应该使用什么？我应该坚持拉斐尔，即使它有点难以实现（我基本上没有JavaScript的背景）？或者你知道一个JavaScript库可以做jsDraw2D做的但更好吗？

谢谢，

Answer 1

您应该使用SVG，因为它们显然更具交互性且易于实现。如果你曾经使用过Khanacademy，那么你可能会知道他们在他们的暂存器中使用了SVG。

此外，推荐使用SVG，如canvas。

Answer 2

如果你能够使用HTML5 Canvas可能是个不错的选择。