strokeStyle
Canvas strokeStyle xususiyati
Misol
strokeStyle = "red" bo‘lgan to‘rtburchak chizing:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "red";
ctx.strokeRect(20, 20, 150, 100);
O‘zingiz sinab ko‘ring »
Quyida ko‘proq misollar.
Tavsif
strokeStyle xususiyati chiziqlar (stroke) uchun ishlatiladigan rang, gradient yoki naqshni o‘rnatadi yoki qaytaradi.
Standart qiymat — #000000 (sof qora).
Shuningdek qarang:
fillStyle xususiyati (to‘ldirish rangi/uslubini o‘rnatish)
lineWidth xususiyati (chiziq kengligini o‘rnatish)
beginPath() metodi (yangi yo‘l boshlash)
moveTo() metodi (yo‘lni nuqtaga ko‘chirish)
lineTo() metodi (yo‘lga chiziq qo‘shish)
stroke() metodi (joriy yo‘lni chizish)
strokeRect() metodi (to‘rtburchak chizish)
Sintaksis
| context.strokeStyle = color|gradient|pattern |
Xususiyat qiymatlari
| Qiymat | Tavsif | Sinab ko‘rish |
|---|---|---|
| color | Chizma chizig‘ining rangini bildiruvchi CSS rang qiymati. Standart qiymat — #000000 | Sinab ko‘rish » |
| gradient | Gradientli chiziq hosil qilish uchun ishlatiladigan gradient obyekti (chiziqli yoki radial) | |
| pattern | Naqshli chiziq hosil qilish uchun ishlatiladigan naqsh (pattern) obyekti |
Ko‘proq misollar
Misol
Gradientli strokeStyle bilan to‘rtburchak chizing:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create gradient
const gradient = ctx.createLinearGradient(0, 0, 170, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.strokeStyle = gradient;
ctx.lineWidth = 5;
ctx.strokeRect(20, 20, 150, 100);
O‘zingiz sinab ko‘ring »
Misol
Gradientli strokeStyle bilan "Big smile!" matnini yozing:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Verdana";
// Create gradient
const gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.strokeStyle = gradient;
ctx.strokeText("Big smile!", 10, 50);
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
stokestyle 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!