Canvas to‘ldirish va kontur
Canvas’da to‘ldirish va kontur (stroke)
Canvas’dagi shakllar/obyektlar uchun to‘ldirish rangi va kontur rangini belgilash uchun quyidagi xususiyatlardan foydalanamiz:
| Xususiyat | Tavsif |
|---|---|
fillStyle |
Obyekt/shaklning to‘ldirish rangini belgilaydi |
strokeStyle |
Obyekt/shakl konturining rangini belgilaydi |
fillStyle xususiyati
fillStyle xususiyati obyektning to‘ldirish rangini belgilaydi.
fillStyle xususiyatining qiymati rang (rang nomi, RGB, HEX, HSL), gradient yoki naqsh (pattern) bo‘lishi mumkin.
Misol
To‘ldirish rangini "green" qilib o‘rnating va fillRect() metodi yordamida to‘ldirilgan to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10,10, 100,100);
</script>
O‘zingiz sinab ko‘ring »
strokeStyle xususiyati
strokeStyle xususiyati kontur rangini belgilaydi.
strokeStyle xususiyatining qiymati rang (rang nomi, RGB, HEX, HSL), gradient yoki naqsh (pattern) bo‘lishi mumkin.
Misol
Kontur rangini "blue" qilib o‘rnating va strokeRect() metodi yordamida konturli to‘rtburchak chizing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.strokeRect(10,10, 100,100);
</script>
O‘zingiz sinab ko‘ring »
fillStyle va strokeStyle’ni birgalikda ishlatish
Yuqoridagi ikkala to‘rtburchakni birlashtirish mutlaqo mumkin.
Misol
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// the filled rectangle
ctx.fillStyle = "green";
ctx.fillRect(10,10, 100,100);
// the outline rectangle
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.strokeRect(10,10, 100,100);
</script>
O‘zingiz sinab ko‘ring »
Alfa kanalli fillStyle va strokeStyle
Shaffoflik hosil qilish uchun fillStyle va strokeStyle xususiyatlarining ikkalasiga ham alfa kanal qo‘shishingiz mumkin.
Misol
fillStyle va strokeStyle xususiyatlarining ikkalasi uchun ham shaffoflikni 50% qilib o‘rnating:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// the filled rectangle
ctx.fillStyle = "rgb(0 255 0 / 50%)";
ctx.fillRect(10,10, 100,100);
// the outline rectangle
ctx.strokeStyle = "rgb(0 0 255 / 50%)";
ctx.lineWidth = 5;
ctx.strokeRect(10,10, 100,100);
</script>
O‘zingiz sinab ko‘ring »
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!