我有一個很大的源圖像,我想在圓圈內部顯示一小部分,並將圓圈外的部分畫布留在圓圈外面。HTML5 globalCompositeOperation vs clip
Mozilla guide to Compositing with HTML5涵蓋兩個主題:globalCompositeOperation
和clip
。它看起來像都這些會讓我做我想做的事情,所以我想知道每個的缺點是什麼,我應該使用哪些。
我可以設置globalCompositeOperation
至source-atop
(或source-in
,但是seems buggy in WebKit)。然後讓目標畫布變成透明的黑色圓圈,然後簡單地畫出源圖像。這將確保只有圓圈部分將被填充。
或者,我可以繪製一個圓形路徑並使用clip
來定義一個裁剪區域,然後在其上繪製源圖像,這也應該確保只有圓形部分將被填充(事實上,Mozilla的上面的頁面甚至有一個例子可以用星星來做很多事情)。
- 這兩種技術是否會像我說的那樣工作,或者我錯過了什麼?
- 如果是這樣,那麼這兩種技術中的任何一種都會有什麼重大的變化,使得它們明顯比另一種更好?
- 如果不是,哪一個總體表現更好?
我會(純屬推測)想像globalCompositeOperation
將有更好的表現,因爲它是應用在每個像素級別的操作,而clip
操作需要做的多邊形交集。但這只是一種預感。
非常好。謝謝(爲jsperf基準測試+1)。我想我誤解了剪輯 - 我不認爲它正在做多邊形測試;它正在構建一個每像素映射哪些像素要在繪圖時忽略,所以它會更快。請注意,我打算在圓圈背後有一個背景,然後在另一個畫布上繪製它,但那會更慢。所以我會去剪輯。謝謝! – mgiuca 2011-06-15 07:12:08