HTML5 Canvas上的明确界限

Question

有没有办法解开一条线？在我的画布上,我有一条不透明度为0.5的线条,宽度为20像素.现在我想让它更长,意味着从旧的那条画出另一条线.这样做时,旧线和新线之间的匹配点变得不那么透明(因为它们现在由两条线组成).所以我想要解开旧线,然后抚摸新线.

我该怎么做？

谢谢

Answer 1

clearRect()是唯一的方法.解决这个问题的一个好方法(如果在画布上绘制了很多元素)是使用绝对定位在HTML中叠加两个画布,一个用于"静态"绘图,另一个用于您计划的绘图的顶层清除/重绘.这样可以节省再次绘制所有画布的CPU时间.

Answer 2

另一个优雅的选择是将'globalCompositeOperation'设置为'xor'并再次绘制你的线......所以它将被删除

Answer 3

我想最简单的方法是简单地清除整个画布(使用clearRect)并再次绘制整行

Answer 4

如何绘制到画布是由API严格定义的,但是如何在软件和/或硬件中完成它取决于浏览器开发人员.一些浏览器使用硬件加速,其他浏览器正在使用它.(例如,使用软件渲染器atm)

在绘制内容时,在计算机图形学中,绘制到缓冲区.当你调用lineTo和stroke时,缓冲区会被更新,并且底层像素中的所有信息都会丢失(或者如果使用透明度,则会部分丢失),并且无法通过撤消来恢复它(除非有一个包含负载的实现旧图纸,但这对记忆来说真的很重要.

因此,能够撤消中风可能会节省大量的CPU/GPU时间但是会大量增加内存