清除HTML5画布上的线条

Question

有没有一种方法可以取消线条的描边？在我的画布上，我有一条不透明度为0.5，宽度为20像素的线条。现在我想让它变得更长，意思是从旧的线中画出另一条线。这样做时，新旧线条之间的匹配点会变得不那么透明(因为它们现在由两条线组成)。因此，我想取消对旧线的描边，然后对新线进行描边。

我该怎么做呢？

谢谢

Answer 1

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

在计算机图形学中，当绘制一些东西时，你会绘制到一个缓冲区。当你调用lineTo和笔划时，缓冲区会更新，底层像素中的所有信息都会丢失(如果你使用透明度，就会丢失部分信息)，而且没有办法通过撤消来找回它(除非有一个包含大量旧绘图的实现，但这对内存来说确实很重)。

因此，能够撤消笔划可能会节省大量的CPU/GPU时间，但会大大增加内存

Answer 2

clearRect()是实现这一目标的唯一方法。解决这个问题的一个好方法(如果您在画布上绘制了许多元素)是使用绝对定位在HTML中覆盖两个画布，其中一个用于“静态”绘图，另一个用于您计划清除/重绘的绘图。这也节省了CPU再次绘制所有画布的时间。

Answer 3

另一个不错的选择是将'globalCompositeOperation‘设置为'xor’，然后绘制again....so线条，它将被删除