在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' ，它將擦除畫布中形狀的所有像素。

在這里查看各種組合

非常有用！