我的畫布上畫了很多東西，現在我想填充定義爲整個畫布的區域，除了幾個孔（我的孔是帶有圓弧的複雜形狀）。用孔填充區域
只有一個孔，它很簡單：我首先製作一個路徑，然後製作一個具有整個畫布矩形的子路徑，然後製作一個具有相反繞線的第二個子路徑。所以當我填充所得到的路徑時，我有效地填充了我的畫布，除了這個洞。
有幾個孔，只要我的孔不相交，它就可以工作：在相交的情況下，此方法填充我的孔的相交部分，這不是所需的結果。
所以這裏的問題：我怎樣才能填補一個形狀與孔相交？
現在我不想試圖明確地計算我的形狀的聯合，因爲它們的複雜性（涉及的弧）。這就是爲什麼我沒有嘗試getImageData（）的原因。
這裏是一個圖形解釋：
這應該是非常快的源帆布和孔都被動畫但幾乎從來沒有在屏幕上超過3個孔。
我不確定我看到了什麼問題。你只是想在某物上繪製路徑並填充路徑的聯合？
在畫布上很容易做到。畫布可以讓您繪製路徑以及子路徑，並且您需要繪製一系列多個子路徑（但只能繪製一條路徑）。爲避免纏繞，您需要以相同方向（順時針或逆時針）繪製所有子路徑。
這裏的一條路徑的一個例子，這實際上是兩個子路徑的結合，使得一個「洞」：
請注意，我只叫BeginPath一次，然後用closePath和moveTo到開始我的新子路徑。
如果你想填補這個逆您可以填寫一個內存中的畫布，畫到內存中的畫布路徑作爲一個剪輯區域，繪製你的正常畫布內存中的畫布，然後將內存中的畫布拖回正常畫布。 Here's an example of that
這個解決方案基本上是我們用Xeon06評論定義的，但是不得不求助於在內存中使用第二個畫布時，它只是爲了解決交叉問題而感覺不好，我會去做，看看它是否可接受如果我沒有找到更好的解決方案，那就快點 –
我做到了，但是非常慢，特別是在Firefox上 –
如果它有任何的舒適性，它會隨着時間的推移而變得更好，即使我們看到了令人難以置信的浪涌在過去的幾年中，JavaScript引擎還遠沒有其他語言，至少V8速度很快。 –
你看過合成嗎？ https://developer.mozilla.org/en/Canvas_tutorial/Compositing –
是的，但我沒有找到解決方案。你認爲你有嗎？ –
事實上，再次思考，我可能會使用第二張（未顯示的）畫布繪製我的面具在目的地畫出我的洞。它似乎代價高，但我不覺得更好... –