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

我认为你想要的是clipping region，由clip（）函数定义。后者需要一堆路径。这是an example。

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

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

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

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

Answer 3

以下是一个从画布中清除圆圈的函数示例：

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 4

使用globalCompositeOperation = 'destination-out'代替'copy'，它会删除画布中形状的所有像素。

查看各种作文here

非常有用！

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

4 个答案: