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

标签 javascript html

我一直在努力寻找一个好的资源来指引我正确的方向,我真的很想有人在这方面帮助我。

我正在开发一个使用 phonegap、js 和 html5 的应用程序。此应用程序的一个组成部分是拥有一张可以用自由形式的涂鸦覆盖的图像。

我不确定我是否应该使用它的 Canvas 对象,如果是的话我该如何着手实现绘图解决方案。

最佳答案

您创建一个并将其绝对定位在图像上。

可以有透明像素 (alpha=1.0),这些像素将显示底层图像。

然后你相应地翻转像素,你的涂鸦变成黑色等。你需要监听触摸事件,将它们的坐标转换为坐标,然后使用 canvas.getContext() 绘制操作来操纵在这些坐标中命中的像素。

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

关于javascript - 使用 <canvas> 和 javascript 在图像上自由绘制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8626429/

相关文章:

javascript - 全屏部分由 translateX 更改

javascript - 使用 javascript 将对象合并到 json 中

javascript - 如何删除数组数据中特定字符之前的所有字符

旧版浏览器中的 HTML5 样式脚本标签

javascript - 如何使用多个选择选项显示/隐藏 div

javascript - 使用包装但模态未打开

javascript - 在输入字段内添加下拉箭头

javascript - 两个引用类似功能的按钮不适用于 html 和 javascript ajax

javascript - 同一页面上具有不同 div id 的多个 D3 TreeMap

javascript - 使用 Ruby webdriver (Selenium 2.0) 单击 javascript 链接