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

Question

我正在使用HTML画布和JavaScript，需要清除由路径关闭创建的形状下面的所有像素（例如，我正在使用flot，想要制作圆角，为此，我首先需要通过在角上绘制曲线来移除正方形角落中的像素）。目前，我只是用与背景相同的颜色填充形状，这可以模仿我想要做的事情，但是，这不是理想的，因为它使得在非实心背景上放置图表时无法看到正方形的角落。我知道有一个clearRect方法可以做到我想要做的事情，但只能处理矩形，我需要处理任何封闭形状。是否可能，如果可能，我该如何做？

- nsw1475

---

你可能想要添加“flot”的超链接。我承认我不知道它是什么，而且假设它是一个打字错误（在SO上有很多这样的错误）。 - brainjam

@brainjam：那你为什么不发链接呢？flot - jigfox

Answer 1

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

- nsw1475

---

由于whatwg和浏览器开发人员的某些愚蠢，globalCompositeOperation copy不再按预期工作...（请参见https://bugzilla.mozilla.org/show_bug.cgi?id=366283） - fserb

context.globalCompositeOperation = 'destination-out' 对我起作用了。 - Craig Myles

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

- Drew Noakes

---

我不确定 save() 和 restore() 是否绝对必要，它们是吗？我发现在 Firefox 和 Chrome 上没有它们也可以工作。我不知道 IE。 - Octopus

@Octopus，保存/恢复将把globalCompositeOperation的值恢复到最初的状态。或者你可以只保留那个值并重置它。这可能会更快--你需要测试一下。 - Drew Noakes

Answer 3

我认为您需要的是由clip()函数定义的剪辑区域。后者需要一堆路径。这里有一个例子。

这与您所特别要求的（即在绘制后删除像素）略有不同，但如果我正确理解您的要求，则最好的方法实际上是一开始就不绘制像素。 编辑: 我现在认为我明白了，您想要做的是将像素清除为透明黑色。为此，在定义路径之后，可以执行以下操作：

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

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

- brainjam

---

问题在于我正在为flot编写插件，而绘图的边框以及其他元素已经在我的插件被调用之前绘制完成，因此clip()无法正常工作。据我所知，它只能防止绘制，而不能删除。如果不是这种情况，这将是完美的解决方案。 - nsw1475

@nsw1475，我添加了第二种方法，我认为它可以实现你想要的功能。 - brainjam

Answer 4

使用globalCompositeOperation = 'destination-out'代替'copy'，它将擦除画布中形状的所有像素。在这里查看各种组合：这里非常有用！

- jume