fillStyle
Canvas fillStyle xususiyati
Misol
To‘rtburchak uchun qizil to‘ldirish rangini belgilang:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
O‘zingiz sinab ko‘ring »
Quyida ko‘proq misollar.
Tavsif
fillStyle xususiyati chizmani to‘ldirish uchun ishlatiladigan rang, gradient yoki naqshni o‘rnatadi yoki qaytaradi.
Standart qiymat — #000000 (sof qora).
Shuningdek qarang:
strokeStyle xususiyati (chiziq rangi/uslubini o‘rnatish)
fillRect() metodi (to‘ldirilgan to‘rtburchak chizish)
rect() metodi (to‘ldirilmagan to‘rtburchak chizish)
Sintaksis
| context.fillStyle = color|gradient|pattern |
Xususiyat qiymatlari
| Qiymat | Tavsif | Sinab ko‘rish |
|---|---|---|
| color | Chizmaning to‘ldirish rangini bildiruvchi CSS rang qiymati. Standart qiymat — #000000 | Sinab ko‘rish » |
| gradient | Chizmani to‘ldirish uchun ishlatiladigan gradient obyekti (chiziqli yoki radial) | |
| pattern | Chizmani to‘ldirish uchun ishlatiladigan naqsh (pattern) obyekti |
Ko‘proq misollar
Misol
To‘rtburchak uchun to‘ldirish uslubi sifatida gradient (yuqoridan pastga) belgilang:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
O‘zingiz sinab ko‘ring »
Misol
To‘rtburchak uchun to‘ldirish uslubi sifatida gradient (chapdan o‘ngga) belgilang:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
O‘zingiz sinab ko‘ring »
Misol
To‘rtburchak uchun to‘ldirish uslubi sifatida qoradan qizilga, so‘ng oqqa o‘tuvchi gradient belgilang:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const var my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
O‘zingiz sinab ko‘ring »
Ishlatiladigan rasm:
Misol
Chizmani to‘ldirish uchun rasmdan foydalaning:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("lamp");
const pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
fillStyle() barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!