Canvas入門基礎(chǔ)（六）：合成與裁剪

2018-06-19 14:40 更新
      在我們繪制圖形時，不同的圖形會因為繪制的先后而有了層級關(guān)系。如果新繪制的圖形和原有內(nèi)容有重疊部分，在默認(rèn)情況下，新繪制的圖形是會覆蓋在原有內(nèi)容之上。
在HTML中，我們會添加z-index來修改層級關(guān)系，那么，在canvas里，我們?nèi)绾涡薷哪兀?/div>

globalCompositeOperation
我們可以利用 globalCompositeOperation 屬性來改變。
它共有12個值：
source-over （默認(rèn)值） 新圖形會覆蓋在原有內(nèi)容之上
source-in 新圖形僅僅會出現(xiàn)與原有內(nèi)容重疊的部分，其他區(qū)域都變成透明的。
source-out 只有新圖形中與原有內(nèi)容不重疊的部分會被繪制出來
source-atop 新圖形中與原有內(nèi)容重疊部分會被繪制，并覆蓋于原有內(nèi)容之上。
lighter 兩圖形中重疊部分作加色處理
xor 重疊部分會變成透明
destination-over 會在原有內(nèi)容之上繪制新圖形
destination-in 原有內(nèi)容與新圖形重疊的部分會被保留，其他部分變成透明的
destination-out 原有內(nèi)容中與新圖形不重疊的部分會被保留
destination-atop 原有內(nèi)容中與新圖形重疊部分會被保留，并會在原有內(nèi)容之上繪制新圖形
darker 兩圖形重疊部分作減色處理
copy 只有新圖形會被保留，其他都被清除掉


裁切路徑

裁切路徑和普通的 canvas 圖形差不多，不同的是它的作用是遮罩，用來隱藏沒有遮罩的部分。

如果和上面介紹的 globalCompositeOperation 屬性作一比較，它可以實現(xiàn)與 source-in 和 source-atop 差不多的效果。最重要的區(qū)別是裁切路徑不會在 canvas 上繪制東西，而且它永遠(yuǎn)不受新圖形的影響。

我們用 clip 方法來創(chuàng)建一個新的裁切路徑。默認(rèn)情況下，canvas 有一個與它自身一樣大的裁切路徑（也就是沒有裁切效果）。
例子：
在這里，用 clip 方法創(chuàng)建一個圓形的裁切路徑，裁切路徑創(chuàng)建之后所有出現(xiàn)在它里面的東西才會畫出來。
var img=new Image();
	img.src="canvas_girl.jpg";
	img.onload=function(){
		cxt.beginPath();
		cxt.arc(120,100,50,0,Math.PI*2,true);
		cxt.clip();
		cxt.drawImage(img,10,10);
	}





以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號