Javascript 在HTML画布中清除形状下的像素

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

---

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

我想你想要的是一个，由clip（）函数定义。后者有一系列的路径。给你

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

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

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

---

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

brainjam的代码方向正确，但没有完全解决问题。以下是解决方案：

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

---

使用

globalCompositeOperation='destination out'

而不是

'copy'

，它将擦除画布中形状的所有像素

看各种各样的作文

---

非常有用

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

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();
};

---

问题是，我正在为flot编写一个插件，在调用插件之前，绘图的边框以及绘图上的其他元素已经绘制好了，因此clip（）将无法工作，因为据我所知，它只会阻止绘制，而不会删除。如果不是这样，这将是一个完美的解决方案。@nsw1475，我添加了第二个方法，我认为它符合您的要求。您可能需要超链接“flot”。我承认我不知道它是什么，并假设它是一个打字错误（有很多这样的问题）。@brainjam:那你为什么不发链接呢@詹斯：好主意。完成。由于whatwg+浏览器开发人员的一些愚蠢之处，globalCompositeOperation复制不再像预期的那样工作。。。（请参阅）context.globalCompositeOperation='destination out'对我有效我不确定是否绝对需要save（）和restore（），是吗？我发现它可以在没有firefox和chrome的情况下工作。我不知道ie。@Octopus，save/restore会将

globalCompositeOperation

值恢复到原来的值。或者，您可以只保留该值并重置它。这可能更快——你必须测试一下。