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

289

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

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

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

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

这将类似于以下内容:https : //software.intel.com/zh-cn/html5/articles/touch-drawing-app-using-html5-canvas

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

任何指针/样本将不胜感激。

提前致谢。

菲利普

HTML5画布就像现实生活中的画布一样工作。当您在一张纸上画一条线时,之后更改它的唯一方法是使用橡皮擦擦除它(可能还会损坏在此绘制的其他物体)或在覆盖它的物体上绘制一些东西。当您在HTML5画布上绘制东西时,它不再是一个对象,而是在画布上变成一堆像素。之后,您只能通过透支对其进行操作。

当您希望用户修改他们之前绘制的笔划时,您需要将用户所做的所有笔划保存到数组中。当用户更改笔触时,您需要擦除并从头开始重新绘制整个画布。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在HTML5画布上绘制多个圆的问题

来自分类Dev

在HTML5画布中的鼠标移动上绘制半透明线

来自分类Dev

如何获取在HTML5画布上绘制的图像的X / Y值?

来自分类Dev

如何在移动设备上调出键盘以捕获用于在HTML5画布上绘制的输入?

来自分类Dev

RXJS在HTML5画布上绘制线条

来自分类Dev

html5画布笔划两次,再次绘制第一个笔划

来自分类Dev

在背景缩放上绘制HTML5画布

来自分类Dev

在html5画布上绘制多个粒子元素而无需渲染终止

来自分类Dev

如何使HTML5画布图案fillstyle与绘制的对象一起移动?

来自分类Dev

在HTML5画布上绘制1像素线的完整解决方案

来自分类Dev

让用户输入图片网址并将其绘制在html5画布上

来自分类Dev

使用for循环绘制HTML5画布圆

来自分类Dev

在HTML5画布上绘制多个图像有时不起作用

来自分类Dev

实时HTML5画布绘制

来自分类Dev

使用JavaScript在HTML5画布上绘制大量点

来自分类Dev

无法在html5画布上绘制

来自分类Dev

HTML5画布笔划有黑点

来自分类Dev

重新加载页面后才能绘制HTML5画布(仅在Google Chrome上)

来自分类Dev

html5画布绘制多个图像

来自分类Dev

HTML5画布图案绘制延迟

来自分类Dev

html5画布笔划两次,再次绘制第一个笔划

来自分类Dev

无法在Phonegap中的HTML5画布上绘制图像

来自分类Dev

在背景缩放上绘制HTML5画布

来自分类Dev

在HTML5画布上绘制图像

来自分类Dev

在HTML5画布中移动矩形的角

来自分类Dev

HTML5画布游戏移动x,y

来自分类Dev

连续绘制HTML5画布

来自分类Dev

HTML5画布-绘制环形扇形

来自分类Dev

html5画布部分绘制