globalCompositeOperation
Canvas globalCompositeOperation xususiyati
Misol
2 ta to‘rtburchak chizing. Qizil to‘rtburchaklar — manzil (destination). Ko‘k to‘rtburchaklar — manba (source):
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.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);
O‘zingiz sinab ko‘ring »
Tavsif
globalCompositeOperation xususiyati manba (source) manzil (destination) ustiga qanday chizilishini o‘rnatadi yoki qaytaradi.
Manba (source) = canvas’ga endi chizmoqchi bo‘lgan chizmalaringiz.
Manzil (destination) = canvas’ga allaqachon chizilgan chizmalar.
Sintaksis
| context.globalCompositeOperation = "value" |
Xususiyat qiymatlari
| Qiymat | Tavsif | Sinab ko‘rish |
|---|---|---|
| source-over | Standart Manbani manzil ustida ko‘rsatadi |
Sinab ko‘rish » |
| source-atop | Manbani manzilning ustiga joylab ko‘rsatadi. Manba rasmining manzildan tashqaridagi qismi ko‘rsatilmaydi | Sinab ko‘rish » |
| source-in | Manbani manzil ichida ko‘rsatadi. Manbaning faqat manzil ICHIDAGI qismi ko‘rsatiladi, manzil esa shaffof bo‘ladi | Sinab ko‘rish » |
| source-out | Manbani manzildan tashqarida ko‘rsatadi. Manbaning faqat manzildan TASHQARIDAGI qismi ko‘rsatiladi, manzil esa shaffof bo‘ladi | Sinab ko‘rish » |
| destination-over | Manzilni manba ustida ko‘rsatadi | Sinab ko‘rish » |
| destination-atop | Manzilni manbaning ustiga joylab ko‘rsatadi. Manzilning manbadan tashqaridagi qismi ko‘rsatilmaydi | Sinab ko‘rish » |
| destination-in | Manzilni manba ichida ko‘rsatadi. Manzilning faqat manba ICHIDAGI qismi ko‘rsatiladi, manba esa shaffof bo‘ladi | Sinab ko‘rish » |
| destination-out | Manzilni manbadan tashqarida ko‘rsatadi. Manzilning faqat manbadan TASHQARIDAGI qismi ko‘rsatiladi, manba esa shaffof bo‘ladi | Sinab ko‘rish » |
| lighter | Manba + manzilni ko‘rsatadi | Sinab ko‘rish » |
| copy | Manbani ko‘rsatadi. Manzil e’tiborga olinmaydi | Sinab ko‘rish » |
| xor | Manba manzil bilan istisno qiluvchi YOKI (exclusive OR) yordamida birlashtiriladi | Sinab ko‘rish » |
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
globalCompositOperation barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
❮ Canvas ma’lumotnomasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!