Canvas globalCompositeOperation အချက်အလက်

Canvas 参考手册

အသုံးပြုခြင်း နှင့် အသုံးချမှု

globalCompositeOperation အချက်အလက် အထူးသတ်မှတ်ခြင်း သို့မဟုတ် အရည်အချင်းပုံစံကို ပိုကြီးပြီး အရည်အချင်းပုံစံပေါ်တွင် ချီတင်ပြခြင်းအတွက် အစီအစဉ်ပြုလုပ်ခြင်းဖြစ်သည်。

ပိုကြီးပြီး အရည်အချင်းပုံစံ = ရှိတဲ့ ပန်းခြံပေါ်တွင် တည်ဆောက်ထားရန် အကြောင်းရပ်ဖြစ်သည်。

ပိုကြီးပြီး အရည်အချင်းပုံစံ = ရှိတဲ့ ပန်းခြံပေါ်တွင် တည်ဆောက်ထားသော လုပ်ဆောင်ပုံစံဖြစ်သည်。

အကျိုးသုံး

အကြောင်းကြား 1

အမျိုးမျိုးသော globalCompositeOperation အတိုင်း လုပ်ဆောင်ပြီး ဟန်းနိုင်ငံ့ပုံစံကို ချီတင်ပြခြင်းဖြစ်သည်။ အပိုင်းရဲကို ပိုကြီးပြီး အပိုင်းလွန်းကို အရည်အချင်းပုံစံဖြစ်သည်:

　　　　　source-over destination-over

သင့် ဘာသာ ကျမ်းစာ ကို ကူးစက်ပြီး မရှိပါ။

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);

ကိုယ်တိုင် ကြိုးစားပါ

အမှတ် 2

အားလုံး globalCompositeOperation အချက်အလက်

ကိုယ်တိုင် ကြိုးစားပါ

ပုံစံ

context.globalCompositeOperation="source-in";

အချက်အလက်

ပြင်ပ ဖော်ပြ
source-over မူကြမ်း။ ပြင်ပတိုက်ပြင်းပြထားအပေါ် မျိုးချိုးပြင်းပြထား ပြထားပါ။
source-atop ပြင်ပတိုက်ပြင်းပြထားအပေါ် မျိုးချိုးပြင်းပြထား ပြထားပါ။ မျိုးချိုးပြင်းပြထား အပေါ် ပြင်ပတိုက်ပြင်းပြထား ပုံပေါ် ပြထားပါ။
source-in ပြင်ပတိုက်ပြင်းပြထားတွင် မျိုးချိုးပြင်းပြထား ပြထားပါ။ ပြင်ပတိုက်ပြင်းပြထားတွင် မျိုးချိုးပြင်းပြထား ပုံပေါ် ပြထားပါ။
source-out ပြင်ပတိုက်ပြင်းပြထားအပြင် မျိုးချိုးပြင်းပြထား ပြထားပါ။ ပြင်ပတိုက်ပြင်းပြထားအပြင် မျိုးချိုးပြင်းပြထား ပုံပေါ် ပြထားပါ။ ပြင်ပတိုက်ပြင်းပြထား အပြင် မျိုးချိုးပြင်းပြထား ပုံပေါ် ပြထားပါ။
destination-over မျိုးချိုးပြင်းပြထားအပေါ် ပြင်ပတိုက်ပြင်းပြထား ပြထားပါ။
destination-atop မျိုးချိုးပြင်းပြထားအပေါ် ပြင်ပတိုက်ပြင်းပြထား ပြထားပါ။ မျိုးချိုးပြင်းပြထားအပေါ် ပြင်ပတိုက်ပြင်းပြထား ပုံပေါ် ပြထားပါ။
destination-in မျိုးချိုးပြင်းပြထားအတွင်း ပြင်ပတိုက်ပြင်းပြထား ပြထားပါ။ မျိုးချိုးပြင်းပြထားအတွင်း ပြင်ပတိုက်ပြင်းပြထား ပုံပေါ် ပြထားပါ။ မျိုးချိုးပြင်းပြထား အပြင် ပြင်ပတိုက်ပြင်းပြထား ပုံပေါ် ပြထားပါ။
destination-out မျိုးချိုးပြင်းပြထားအပြင် ပြင်ပတိုက်ပြင်းပြထား ပြထားပါ။ မျိုးချိုးပြင်းပြထားအပြင် ပြင်ပတိုက်ပြင်းပြထား ပုံပေါ်တွင် ပြထားပါ။ မျိုးချိုးပြင်းပြထား အပြင် ပြင်ပတိုက်ပြင်းပြထား ပုံပေါ် ပြထားပါ။
ပေါင်းစပ် မျိုးချိုးပြင်းပြထား + ပြင်ပတိုက်ပြင်းပြထား
ချိုင်းပြထား မျိုးချိုးပြင်းပြထားပါ။ ပြင်ပတိုက်ပြင်းပြထားမှုကို ချွတ်ပစ်ပါ။
xor 使用异或操作对源图像与目标图像进行组合。

技术细节

默认值： source-over

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注释：Internet Explorer 8 以及更早的版本不支持 元素。

Canvas 参考手册