使用<canvas>和javascript在图像上进行自由绘制

Question

我一直在尝试寻找一个好的资源来指引我正确的方向，我真的希望有人能在这方面帮助我。

我正在开发一个使用phonegap、js和html5的应用程序。这个应用程序的一个组件是要有一张可以与自由形状涂鸦叠加的图片。

我不确定是否应该使用canvas对象，如果是的话，该如何实现绘图解决方案。

- Zafissa

---

那么，你只是在图像上绘制吗？你可以使用画布来实现，只需将画布元素放在图像上方即可。 - Jeffrey Sweeney

在移动设备上，我该如何在画布上绘图？同样的JavaScript代码能用于触摸事件吗？（例如mousedown和mouseup事件） - Zafissa

晚回复了...没错，ontouchstart，ontouchmove等。 - Jeffrey Sweeney

Answer 1

你需要创建并绝对定位一个 `` 元素在图片之上。

`` 可以有透明像素 (alpha=1.0)，这些像素会显示底层图片。

然后你可以根据你的涂鸦翻转 `` 像素到黑色等。你需要监听触摸事件，将它们的坐标转换为 `` 中的坐标，并使用 `canvas.getContext()` 绘制操作来操作落在这些坐标上的像素。

如果您需要进一步帮助，请针对每个部分提出单独的问题，因为完整的解决方案将是冗长的源代码，超出了简单回答问题的范围。

- Mikko Ohtamaa