globalCompositeOperation即Canvas中的合成操作旺罢。
1、source-over
這是默認(rèn)值其兴，他表示繪制的圖形將畫在現(xiàn)有畫布之上
$(document).ready(function(){
varcanvas=document.getElementById("myCanvas");
varcontext=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="source-over"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
2、destination-over
這個(gè)操作的值與前一個(gè)值相反，所以現(xiàn)在目標(biāo)繪制在源之上
$(document).ready(function(){
varcanvas=document.getElementById("myCanvas");
varcontext=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="destination-over"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
3肾请、source-atop
這個(gè)操作會(huì)將源繪制在目標(biāo)之上，但是在重疊區(qū)域上兩者都是不透明的更胖。繪制在其他位置的目標(biāo)是不透明的铛铁，但源是透明的。
$(document).ready(function(){
varcanvas=document.getElementById("myCanvas");
varcontext=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="source-atop"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
4却妨、destination-atop
這個(gè)操作與source-atop相反饵逐，目標(biāo)繪制在源之上
$(document).ready(function(){
varcanvas=document.getElementById("myCanvas");
varcontext=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="destination-atop"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
5、source-in
在源于目標(biāo)重疊的區(qū)域只繪制源彪标，而不重疊的部分編程透明的倍权。
$(document).ready(function(){
varcanvas=document.getElementById("myCanvas");
varcontext=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="source-in"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
6、destination-in
這個(gè)操作與source-in相反捞烟，在源于目標(biāo)重疊的區(qū)域保留目標(biāo)薄声。而不重疊的部分都變成透明的当船。
$(document).ready(function(){
varcanvas=document.getElementById("myCanvas");
varcontext=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="destination-in"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
7、source-out
在與目標(biāo)不重疊的區(qū)域上繪制源默辨，其他部分都變成透明的德频。
$(document).ready(function(){
varcanvas=document.getElementById("myCanvas");
varcontext=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="source-out"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
8、destination-out
在與源不重疊的區(qū)域上保留目標(biāo)缩幸。其他部分都變成透明的抱婉。
$(document).ready(function(){
varcanvas=document.getElementById("myCanvas");
varcontext=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="destination-out"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
9、lighter
這個(gè)值與順序無關(guān)桌粉，如果源與目標(biāo)重疊蒸绩，就將兩者的顏色值想家。得到的顏色值的最大取值為255铃肯，結(jié)果就為白色患亿。
$(document).ready(function(){
varcanvas=document.getElementById("myCanvas");
varcontext=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="lighter"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
10、copy
這個(gè)值與順序無關(guān)押逼，只繪制源步藕，覆蓋掉目標(biāo)。
$(document).ready(function(){
varcanvas=document.getElementById("myCanvas");
varcontext=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="copy"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
11挑格、xor
這個(gè)值與順序無關(guān)咙冗，只繪制出不重疊的源與目標(biāo)區(qū)域。所有重疊的部分都變成透明的
$(document).ready(function(){
varcanvas=document.getElementById("myCanvas");
varcontext=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="xor"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
});
