在网格上绘制线条

Question

我的图像上有网格线，并希望用户在这些网格线上绘制较粗的线条，每条线条应从一个交叉点到下一个交叉点。我应该在哪里开始研究？我意识到这可能是一个非常广泛的问题，我只想在这里寻找一些方向。寻找php和jquery / javascript解决方案。

非常感谢， 托德

Answer 1

您可以使用<canvas>元素。

1. 使用.drawImage()将图片加载到画布中。
2. 为画布和绘制线创建onclick处理程序。
3. 使用toDataURL()将画布的输出保存到图像中。

链接：

• This回答演示了如何将图片绘制到画布上并使用.toDataURL()检索结果。

• This answer包含如何检索画布上点击坐标的代码。

更新

作为奖励： HERE 是可以使用的代码:)。绘图就在那里，但必须添加对网格的捕捉。使用Chrome和Firefox进行测试。