填充HTML畫布，不包括任意（可能重疊）的圓圈

給定一個已經繪製到的HTML畫布，除了給定的圓形區域以外，遮罩整個畫布的最佳方式是什麼？（在上下文中：陰影除了有光源的地方）填充HTML畫布，不包括任意（可能重疊）的圓圈

我希望它會像rect()一樣簡單，然後是arc() s，但AFAIK沒有辦法在事後「刪除」那些圓形部分。我可以接近（http://jsfiddle.net/mW8D3/2/），但圓圈的重疊區域以陰影結尾（以XOR方式，而我想要OR）。使用clip()也有同樣的問題。

我也嘗試過使用globalCompositeOperation，但不能完全達到我想要的效果。

任何想法？

2011-06-01 wachunga

您可以先在第二個畫布上創建陰影圖像，然後用globalCompositeOperation'copy'和一個透明的fillStyle從其中刪除孔。

2011-06-01 11:05:44

我希望避免引入其他畫布，但很高興知道，這是一個選項。看起來'目的地頂部'也適用。 – wachunga 2011-06-01 21:09:31

回答