我正在使用HTML画布和JavaScript,需要清除由路径关闭创建的形状下面的所有像素(例如,我正在使用flot,想要制作圆角,为此,我首先需要通过在角上绘制曲线来移除正方形角落中的像素)。目前,我只是用与背景相同的颜色填充形状,这可以模仿我想要做的事情,但是,这不是理想的,因为它使得在非实心背景上放置图表时无法看到正方形的角落。我知道有一个clearRect方法可以做到我想要做的事情,但只能处理矩形,我需要处理任何封闭形状。是否可能,如果可能,我该如何做?
context.save();
context.globalCompositeOperation = 'copy';
context.fillStyle = 'rgba(0,0,0,0)';
//draw shape to cover up stuff underneath
context.fill();
context.restore();
这里是一个清除画布上圆形的函数示例:
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();
};
globalCompositeOperation
的值恢复到最初的状态。或者你可以只保留那个值并重置它。这可能会更快--你需要测试一下。 - Drew Noakes