在HTML5 Canvas上绘制/移动/删除笔划

时间:2015-02-27 23:36:20

标签: javascript cordova canvas html5-canvas drawing

我正在使用HTML5 Cordova开发绘图应用程序。

我需要在HTML5 Canvas上实现绘图,移动笔划,删除墨迹笔划。

我正在探索实现以下目标的最佳方法:

1)画一个笔画 2)选择一个笔划并移动它 3)选择一个笔划并将其删除。

这与此类似: https://software.intel.com/en-us/html5/articles/touch-drawing-app-using-html5-canvas

但是我需要选择/移动/删除上面库不支持的笔画。

任何指针/样品都会非常感激。

提前致谢。

1 个答案:

答案 0 :(得分:0)

HTML5画布就像现实生活中的画布一样。当你在一张纸上画一条线时,之后改变它的唯一方法是用橡皮擦擦掉它(可能还会破坏那里画的其他东西)或在它上面画一些覆盖它的东西。当您向HTML5画布绘制内容时,它将停止作为对象并在画布上变为一堆像素。你只能通过透支来操纵它。

当您希望用户修改之前绘制的笔划时,您需要保存用户对阵列所做的所有笔划。当用户更改笔划时,您需要从头开始擦除并重绘整个画布。

当您处理用户可以自由移动的几何对象时,您可能还会考虑使用SVG作为替代方案。在SVG中,每个图像元素都是一个可以在将其放入SVG文档后进行操作的对象。