从HTML5 Canvas中清除圆形区域 [英] clearing circular regions from HTML5 Canvas

问题描述

看起来从画布中清除区域的唯一方法是使用clearRect（）命令 - 我需要清除一个圆圈（我从一个填充的画布中遮蔽了区域，在此特定情况下点光源），尽管所有的尝试，似乎不可能。

It appears the only way to clear a region from a canvas is to use the clearRect() command - I need to clear a circle (I am masking out areas from a filled canvas, point lights in this specific case) and despite all attempts it does not seem possible.

我尝试绘制一个alpha值为0的圆，但除非alpha值更高（这是相反的点：P），否则什么都不会出现 -

I tried drawing a circle with an alpha value of 0 but simply nothing would appear unless the alpha was higher (which is counter to the point :P) - I assume because a contex.fill() draws it as an add rather than a replace.

任何关于我如何能够（快速）清除圈子以提供掩码的建议？ / p>

Any suggestions on how I might be able to (quickly) clear circles for mask purposes?

推荐答案

使用 .arc 创建圆形笔划，然后使用<$

Use .arc to create a circular stroke and then use .clip() to make that the current clipping region.

然后你可以使用 .clearRect （）擦除整个画布，但只有剪裁的区域会改变。

Then you can use .clearRect() to erase the whole canvas, but only the clipped area will change.

这篇关于从HTML5 Canvas中清除圆形区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！