清除 HTML 画布中形状下的像素答案

【问题标题】：clear pixels under a shape in HTML canvas清除 HTML 画布中形状下的像素
【发布时间】：2011-03-06 12:26:16
【问题描述】：

我正在使用 HTML 画布和 javascript，我需要清除通过关闭路径创建的形状下方的所有像素（例如，我正在使用 flot，我想制作圆角，然后为此，我首先需要通过在角的顶部绘制一条曲线来去除方角以去除所需的像素）。

现在，我只是用与背景相同的颜色填充形状来做到这一点，这可以模仿我想要做的事情，但是它并不理想，因为它无法将图表放在顶部没有看到方角的非纯色背景。我知道有一个 clearRect 方法可以做我想做的事情，但是只有矩形，我需要用任何封闭的形状来做。有没有可能，如果有，我该怎么做？

【问题讨论】：

您可能想要超链接“flot”。我承认我不知道它是什么，并认为它是一个错字（SO 上有很多这样的错字）。
@brainjam：那你为什么不发布链接？ flot
@Jens：好主意。完成。

标签： javascript html canvas

【解决方案1】：

brainjam 的代码正朝着正确的方向发展，但并没有完全解决问题。这是解决方案：

context.save();
context.globalCompositeOperation = 'copy';
context.fillStyle = 'rgba(0,0,0,0)';
//draw shape to cover up stuff underneath
context.fill();
context.restore();

【讨论】：

对于 whatwg + 浏览器开发人员的一些愚蠢行为，globalCompositeOperation 副本不再按预期工作......（请参阅bugzilla.mozilla.org/show_bug.cgi?id=366283）
context.globalCompositeOperation = 'destination-out' 为我工作

【解决方案2】：

这是一个从画布上清除圆圈的函数示例：

var clearCircle = function(x, y, radius)
{
    context.save();
    context.globalCompositeOperation = 'destination-out';
    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI, false);
    context.fill();
    context.restore();
};

【讨论】：

我不确定 save() 和 restore() 是否绝对必要，是吗？我发现它可以在没有 Firefox 和 chrome 的情况下工作。我不知道ie。
@Octopus，保存/恢复会将globalCompositeOperation 值恢复到原来的值。或者，您可以只保留该值并重置它。这可能会更快——您必须对其进行测试。

【解决方案3】：

我想你想要的是一个clipping region，由clip() 函数定义。后者采用了一堆路径。这是an example。

这与您具体要求的有点不同（即在绘制像素后删除像素），但如果我正确理解您的要求，实际上首先不绘制像素可能会更好。

编辑：我现在想我明白你想要做的是透明像素到透明黑色。为此，在定义路径后，请执行以下操作：

context.fillStyle = 'rgba(0,0,0,0)';
context.fill();

第一个语句将填充颜色设置为透明黑色。

【讨论】：

问题是我正在为flot编写一个插件，并且在调用我的插件之前已经绘制了绘图的边框以及绘图上的其他元素，因此clip()将不起作用，因为据我了解，它只会阻止绘图，而不会删除。如果不是这种情况，这将是完美的解决方案。
@nsw1475，我添加了第二种方法，我认为它可以满足您的需求。

【解决方案4】：

使用globalCompositeOperation = 'destination-out' 而不是'copy'，它将擦除画布中形状的所有像素。

查看各种作文here

很有用！

【讨论】：