从 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)，否则什么都不会出现 - 我假设是因为 contex.fill() 将其绘制为添加而不是而不是替换.

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.

关于我如何能够(快速)清除用于蒙版目的的圆圈的任何建议?

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

推荐答案

使用 .arc 创建圆形笔划，然后使用 .clip() 使其成为当前剪辑区域.

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屋！