在网格上绘制线条

Question

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

非常感谢， 托德

Answer 1

您可以使用<canvas> 元素。

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

链接：

• This 答案演示了在画布上绘制图像并使用.toDataURL() 检索结果。

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

更新：

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