strokeText()
Canvas strokeText() metodi
Misol
strokeText() yordamida canvas’ga "Hello world!" va "Big smile!" (gradient bilan) matnlarini yozing:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "20px Georgia";
ctx.strokeText("Hello World!", 10, 50);
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, 90);
O‘zingiz sinab ko‘ring »
Tavsif
strokeText() metodi canvas’ga matn chizadi.
strokeStyle ning standart qiymati — #000000 (sof qora).
Maslahat: Shrift va shrift o‘lchamini belgilash uchun font xususiyatidan, matnni boshqa rang/gradientda chizish uchun esa strokeStyle xususiyatidan foydalaning.
Shuningdek qarang:
font xususiyati (matn shrifti va o‘lchamini o‘rnatish)
fillStyle xususiyati (matn rangi/gradientini o‘rnatish)
textAlign xususiyati (matnni tekislashni o‘rnatish)
textBaseline xususiyati (matnning asosiy chizig‘ini o‘rnatish)
fillText() metodi (matnni chizish)
| context.strokeText(text, x, y, maxWidth) |
Parametr qiymatlari
| Parametr | Tavsif | Sinab ko‘rish |
|---|---|---|
| text | Canvas’ga yoziladigan matn | Sinab ko‘rish » |
| x | Boshlang‘ich pozitsiyaning x koordinatasi | Sinab ko‘rish » |
| y | Boshlang‘ich pozitsiyaning y koordinatasi | Sinab ko‘rish » |
| maxWidth | (Ixtiyoriy) Matnning piksellardagi maksimal kengligi | Sinab ko‘rish » |
Qaytariladigan qiymat
| YO‘Q |
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
strokeText() 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!