2011-06-14 60 views
1

我有一個很大的源圖像,我想在圓圈內部顯示一小部分,並將圓圈外的部分畫布留在圓圈外面。HTML5 globalCompositeOperation vs clip

Mozilla guide to Compositing with HTML5涵蓋兩個主題:globalCompositeOperationclip。它看起來像這些會讓我做我想做的事情,所以我想知道每個的缺點是什麼,我應該使用哪些。

我可以設置globalCompositeOperationsource-atop(或source-in,但是seems buggy in WebKit)。然後讓目標畫布變成透明的黑色圓圈,然後簡單地畫出源圖像。這將確保只有圓圈部分將被填充。

或者,我可以繪製一個圓形路徑並使用clip來定義一個裁剪區域,然後在其上繪製源圖像,這也應該確保只有圓形部分將被填充(事實上,Mozilla的上面的頁面甚至有一個例子可以用星星來做很多事情)。

  1. 這兩種技術是否會像我說的那樣工作,或者我錯過了什麼?
  2. 如果是這樣,那麼這兩種技術中的任何一種都會有什麼重大的變化,使得它們明顯比另一種更好?
  3. 如果不是,哪一個總體表現更好?

我會(純屬推測)想像globalCompositeOperation將有更好的表現,因爲它是應用在每個像素級別的操作,而clip操作需要做的多邊形交集。但這只是一種預感。

回答

6

截止到3月份,globalCompositeOperation在所有瀏覽器上都不起作用。

剪輯確實...除了反鋸齒,實際上,這是每個瀏覽器可悲的不同。

在我看來,這裏做適當的事情是使用剪輯。使用source-atop可能適用於您非常特定的情況,但它不像您描述的那樣具有很強的可擴展性。如果你想改變它,就像說你的圈子背後有一個背景,如果你用globalComposite的方式來做,你會遇到麻煩。

測試結果如下:在我測試過的每個瀏覽器中剪輯速度更快,並且在Firefox中大幅加快。看結果還是自己試試here

+0

非常好。謝謝(爲jsperf基準測試+1)。我想我誤解了剪輯 - 我不認爲它正在做多邊形測試;它正在構建一個每像素映射哪些像素要在繪圖時忽略,所以它會更快。請注意,我打算在圓圈背後有一個背景,然後在另一個畫布上繪製它,但那會更慢。所以我會去剪輯。謝謝! – mgiuca 2011-06-15 07:12:08