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

Question

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

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

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

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

Answer 3

我想你想要的是一个剪辑区域 ，由clip（）函数定义。 后者需要一堆路径。 这是一个例子 。

这与你特别要求的（与绘制它们后删除像素）略有不同，但如果我正确理解你的要求，实际上不首先绘制像素可能更好。

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

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

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

Answer 4

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

在这里查看各种组合

非常有用！