HTML5 Canvas上的明确界限

时间:2011-07-08 19:21:31

标签: html5 canvas line stroke

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

我该怎么办?

感谢

4 个答案:

答案 0 :(得分:11)

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

答案 1 :(得分:7)

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

答案 2 :(得分:5)

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

答案 3 :(得分:5)

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

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

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