HTML canvas globalCompositeOperation Property
ဥပမာ
မတူညီသော globalCompositeOperation တန်ဖိုးများကို အသုံးပြု၍ စတုဂံပုံဆွဲပါ။ အနီရောင်စတုဂံများသည် ဦးတည်ရာပုံများ ဖြစ်သည်။ အပြာရောင်စတုဂံများသည် အရင်းအမြစ်ပုံများ ဖြစ်သည်
အရင်းအမြစ်-ကျော်
ဦးတည်ရာ-ကျော်
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);
Browser ပံ့ပိုးမှု
Internet Explorer 9၊ Firefox၊ Opera၊ Chrome နှင့် Safari တို့သည် globalCompositeOperation ပိုင်ဆိုင်မှုကို ပံ့ပိုးပေးသည်။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
globalCompositeOperation ပိုင်ဆိုင်မှုသည် ရင်းမြစ် (အသစ်) ပုံတစ်ပုံကို ဦးတည်ရာ (ရှိပြီးသား) ပုံတစ်ခုသို့ ရေးဆွဲပုံအား သတ်မှတ် သို့မဟုတ် ပြန်ပေးသည်။
အရင်းအမြစ်ပုံ = သင် ကင်းဗတ်ပေါ်တွင် တင်တော့မည့် ပုံများ။
destination image = ကင်းဗတ်ပေါ်တွင် တင်ထားပြီးသော ပုံများ။
| မူလတန်ဖိုး: | အရင်းအမြစ်-ကျော် |
|---|---|
| JavaScript syntax- | စကား စပ် .globalCompositeOperation="source-in"; |
အိမ်ခြံမြေတန်ဖိုးများ
| Value | Description | Play it |
|---|---|---|
| source-over | Default. Displays the source image over the destination image | |
| source-atop | Displays the source image on top of the destination image. The part of the source image that is outside the destination image is not shown | |
| source-in | Displays the source image in to the destination image. Only the part of the source image that is INSIDE the destination image is shown, and the destination image is transparent | |
| source-out | Displays the source image out of the destination image. Only the part of the source image that is OUTSIDE the destination image is shown, and the destination image is transparent | |
| destination-over | Displays the destination image over the source image | |
| destination-atop | Displays the destination image on top of the source image. The part of the destination image that is outside the source image is not shown | |
| destination-in | Displays the destination image in to the source image. Only the part of the destination image that is INSIDE the source image is shown, and the source image is transparent | |
| destination-out | Displays the destination image out of the source image. Only the part of the destination image that is OUTSIDE the source image is shown, and the source image is transparent | |
| lighter | Displays the source image + the destination image | |
| copy | Displays the source image. The destination image is ignored | |
| xor | The source image is combined by using an exclusive OR with the destination image |
ဥပမာ
globalCompositeOperation ပိုင်ဆိုင်မှုတန်ဖိုးများအားလုံး-