以交互方式绘制到 <div>

Question

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

我现在愿意做的就是能够用鼠标在<div> 上画图：

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

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

• 拉斐尔 (raphaeljs.com/#demo)
• jsDraw2D (jsdraw2d.jsfiction.com/demo/linepolygon.htm)

---

问题

Raphael 看起来很怪异，但对于我想做的事情来说有点矫枉过正。相反，从我测试的结果来看，jsDraw2D 似乎工作得很好（虽然只是手动绘制）。

我有几个限制，例如：

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

---

问题

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

谢谢，

Answer 1

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

此外，SVG 也是 w3c 推荐的，例如 canvas。

Answer 2

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