Mipengano ya Canvas globalCompositeOperation
Mifano na matumizi
globalCompositeOperation Mipengano ya kufanya au kurejesha kama picha ya kigeni inayotumika katika picha ya kielewa.
Picha ya kigeni = Iliotumia katika picha ya kichwani.
Picha ya kielewa = Iliotumia katika picha ya kichwani.
Mbinu
Mfano 1
Kuandika kwa maadili ya globalCompositeOperation tofauti. Kichwacha kichariu ni picha ya kielewa. Kichwacha kichariu ni picha ya kigeni:
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);
Mfano 2
Allivyo kwa sababu ya globalCompositeOperation:
Mambo ya Kiingilishi
context.globalCompositeOperation="source-in";
Kivyo cha sababu
| Kivyo | Kuelewa |
|---|---|
| source-over | Kwa msingi. Onyeshaa picha ya chaguo kwenye picha ya msingi. |
| source-atop | Onyeshaa picha ya chaguo kwenye juu ya picha ya msingi. Picha ya chaguo ya kando ya msingi inaonekana kwa rangi ya mafuta. |
| source-in | Onyeshaa picha ya chaguo kwenye picha ya msingi. Hata ya picha ya chaguo ya kando ya msingi inaonekana kwa rangi ya mafuta. |
| source-out | Onyeshaa picha ya chaguo kwenye kando ya picha ya msingi. Hata ya kando ya picha ya chaguo inayotawala inatayenea, picha ya msingi inaonekana kwa rangi ya mafuta. |
| destination-over | Onyeshaa picha ya msingi kwenye juu ya picha ya msingi. |
| destination-atop | Onyeshaa picha ya msingi kwenye juu ya picha ya msingi. Picha ya msingi ya kando ya juu inaonekana kwa rangi ya mafuta. |
| destination-in | Onyeshaa picha ya msingi ya kando. Hata ya kando ya picha ya msingi inayotawala inatayenea, picha ya chaguo inaonekana kwa rangi ya mafuta. |
| destination-out | Onyeshaa picha ya msingi ya kando. Hata ya kando ya picha ya msingi inayotawala inatayenea, picha ya chaguo inaonekana kwa rangi ya mafuta. |
| pewa | Onyeshaa picha ya chaguo + picha ya msingi. |
| kopi | Onyeshaa picha ya chaguo. Tukuu picha ya msingi. |
| xor | 使用异或操作对源图像与目标图像进行组合。 |
技术细节
| 默认值： | source-over |
|---|
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Kweli:Internet Explorer 8 na zaidi ya zamani haikubali elementi ya <canvas>.
