Canvas kompozitsiyalash
globalCompositeOperation xususiyati
globalCompositeOperation xususiyati yangi shakllarni chizishda qo‘llaniladigan kompozitsiya amalining turini belgilaydi. Oldingi boblarda yangi chizmalar bir-birining ustiga joylashtirilgan edi. globalCompositeOperation xususiyati yordamida yangi shakllar bilan nima qilishni o‘zimiz hal qilishimiz mumkin.
Keling, bir nechta misolni ko‘rib chiqamiz!
"source-over" qiymati
"source-over" qiymati standart hisoblanadi. U yangi shakllarni mavjud kontent ustiga chizadi.
Misol
globalCompositeOperation xususiyatini "source-over" ga o‘rnating. So‘ngra bir-birining ustiga tushadigan ikkita to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "source-over";
// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
"source-out" qiymati
"source-out" qiymati yangi shakllarni faqat mavjud kontent bilan ustma-ust tushmaydigan joylarda chizadi.
Misol
globalCompositeOperation xususiyatini "source-out" ga o‘rnating. So‘ngra bir-birining ustiga tushadigan ikkita to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "source-out";
// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
"destination-over" qiymati
"destination-over" qiymati yangi shakllarni mavjud kontent ortiga chizadi.
Misol
globalCompositeOperation xususiyatini "destination-over" ga o‘rnating. So‘ngra bir-birining ustiga tushadigan ikkita to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "destination-over";
// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
"destination-atop" qiymati
"destination-atop" qiymati mavjud kontentni faqat yangi shakl bilan ustma-ust tushgan joylarda saqlab qoladi. Yangi shakl mavjud kontent ortiga chiziladi.
Misol
globalCompositeOperation xususiyatini "destination-atop" ga o‘rnating. So‘ngra bir-birining ustiga tushadigan ikkita to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "destination-atop";
// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
"lighter" qiymati
"lighter" qiymati ikkala shakl ustma-ust tushgan joyda rangni yorqinroq qiladi.
Misol
globalCompositeOperation xususiyatini "lighter" ga o‘rnating. So‘ngra bir-birining ustiga tushadigan ikkita to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "lighter";
// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
"copy" qiymati
"copy" qiymati natijasida faqat yangi shakl ko‘rsatiladi.
Misol
globalCompositeOperation xususiyatini "copy" ga o‘rnating. So‘ngra bir-birining ustiga tushadigan ikkita to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "copy";
// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
"xor" qiymati
"xor" qiymati natijasida shakllar ikkalasi ustma-ust tushgan joyda shaffof bo‘ladi, qolgan barcha joylarda esa odatdagidek chiziladi.
Misol
globalCompositeOperation xususiyatini "xor" ga o‘rnating. So‘ngra bir-birining ustiga tushadigan ikkita to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "xor";
// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
"multiply" qiymati
"multiply" qiymati natijasida tasvir to‘qroq bo‘ladi. U yuqori qatlam piksellarini pastki qatlam piksellariga ko‘paytiradi.
Misol
globalCompositeOperation xususiyatini "multiply" ga o‘rnating. So‘ngra bir-birining ustiga tushadigan ikkita to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "multiply";
// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
"screen" qiymati
"screen" qiymati natijasida tasvir ochroq bo‘ladi. Piksellar invertlanadi, so‘ngra ko‘paytiriladi va yana invertlanadi ("multiply" ning teskarisi).
Misol
globalCompositeOperation xususiyatini "screen" ga o‘rnating. So‘ngra bir-birining ustiga tushadigan ikkita to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "screen";
// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
"darken" qiymati
"darken" qiymati ikkala shakl ustma-ust tushgan joyda rangni to‘qroq qiladi (ikkala qatlamning eng to‘q piksellarini saqlab qoladi).
Misol
globalCompositeOperation xususiyatini "darken" ga o‘rnating. So‘ngra bir-birining ustiga tushadigan ikkita to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "darken";
// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
"lighten" qiymati
"lighten" qiymati ikkala shakl ustma-ust tushgan joyda rangni ochroq qiladi (ikkala qatlamning eng och piksellarini saqlab qoladi).
Misol
globalCompositeOperation xususiyatini "lighten" ga o‘rnating. So‘ngra bir-birining ustiga tushadigan ikkita to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "lighten";
// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
"hue" qiymati
"hue" qiymati yuqori qatlamning rang tonini (hue) oladi va pastki qatlamning yorqinligi (luma) hamda to‘yinganligini (chroma) saqlab qoladi.
Misol
globalCompositeOperation xususiyatini "hue" ga o‘rnating. So‘ngra bir-birining ustiga tushadigan ikkita to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "hue";
// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
"luminosity" qiymati
"luminosity" qiymati yuqori qatlamning yorqinligini (luma) oladi va pastki qatlamning rang toni (hue) hamda to‘yinganligini (chroma) saqlab qoladi.
Misol
globalCompositeOperation xususiyatini "luminosity" ga o‘rnating. So‘ngra bir-birining ustiga tushadigan ikkita to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "luminosity";
// Draw two overlapping rectangles
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
O‘zingiz sinab ko‘ring »
globalCompositeOperation xususiyatining qiymatlari
globalCompositeOperation xususiyati quyidagi qiymatlarni qabul qilishi mumkin:
| Qiymat | Tavsif |
|---|---|
| source-over | Standart qiymat. Yangi shakllarni mavjud kontent ustiga chizadi |
| source-in | Yangi shakllarni faqat yangi shakl va mavjud kontent ustma-ust tushgan joylarda chizadi. Qolgan hamma narsa shaffof qilinadi |
| source-out | Yangi shakllarni faqat mavjud kontent bilan ustma-ust tushmaydigan joylarda chizadi |
| source-atop | Yangi shakllarni faqat mavjud kontent bilan ustma-ust tushadigan joylarda chizadi |
| destination-over | Yangi shakllarni mavjud kontent ortiga chizadi |
| destination-in | Mavjud kontentni faqat yangi shakl va mavjud kontent ustma-ust tushgan joylarda saqlab qoladi. Qolgan hamma narsa shaffof qilinadi |
| destination-out | Mavjud kontentni faqat yangi shakl bilan ustma-ust tushmaydigan joylarda saqlab qoladi |
| destination-atop | Mavjud kontentni faqat yangi shakl bilan ustma-ust tushgan joylarda saqlab qoladi. Yangi shakl mavjud kontent ortiga chiziladi |
| lighter | Ikkala shakl ustma-ust tushgan joyda rang yorqinroq bo‘ladi |
| copy | Faqat yangi shaklni ko‘rsatadi |
| xor | Shakllar ikkalasi ustma-ust tushgan joyda shaffof bo‘ladi, qolgan barcha joylarda esa odatdagidek chiziladi |
| multiply | Yuqori qatlam piksellarini pastki qatlam piksellariga ko‘paytiradi. Natijada tasvir to‘qroq bo‘ladi |
| screen | Piksellarni invertlaydi, so‘ngra ko‘paytiradi va yana invertlaydi. Natijada tasvir ochroq bo‘ladi ("multiply" ning teskarisi) |
| overlay | multiply va screen ning birikmasi. Asosiy qatlamning to‘q qismlari yanada to‘qroq, och qismlari esa yanada ochroq bo‘ladi |
| darken | Ikkala qatlamning eng to‘q piksellarini saqlab qoladi |
| lighten | Ikkala qatlamning eng och piksellarini saqlab qoladi |
| color-dodge | Pastki qatlamni invertlangan yuqori qatlamga bo‘ladi |
| color-burn | Invertlangan pastki qatlamni yuqori qatlamga bo‘ladi, so‘ngra natijani invertlaydi |
| hard-light | "overlay" kabi, lekin yuqori va pastki qatlamlarning o‘rni almashtirilgan |
| soft-light | "hard-light" ning yumshoqroq varianti |
| difference | Har doim musbat qiymat olish uchun pastki qatlamni yuqori qatlamdan ayiradi - yoki aksincha |
| exclusion | "difference" kabi, lekin kontrasti pastroq |
| hue | Yuqori qatlamning rang tonini (hue) oladi va pastki qatlamning yorqinligi (luma) hamda to‘yinganligini (chroma) saqlab qoladi |
| saturation | Yuqori qatlamning to‘yinganligini (chroma) oladi va pastki qatlamning yorqinligi (luma) hamda rang tonini (hue) saqlab qoladi |
| color | Yuqori qatlamning rang toni (hue) va to‘yinganligini (chroma) oladi hamda pastki qatlamning yorqinligini (luma) saqlab qoladi |
| luminosity | Yuqori qatlamning yorqinligini (luma) oladi va pastki qatlamning rang toni (hue) hamda to‘yinganligini (chroma) saqlab qoladi |
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!