Canvas matni
HTML Canvas matni
Canvas’da matn chizish uchun eng muhim xususiyat va metodlar quyidagilar:
font- matn uchun shrift xususiyatlarini belgilaydifillText()- "to‘ldirilgan" matn chizadistrokeText()- "konturli" matn chizadi (to‘ldirilmagan)
font xususiyati
font xususiyati ishlatiladigan shriftni va shrift o‘lchamini belgilaydi.
Ushbu xususiyatning standart qiymati — "10px sans serif".
fillText() metodi
fillText() metodi "to‘ldirilgan" matn chizish uchun ishlatiladi.
fillText() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| text | Majburiy. Chiziladigan matn satri (string) |
| x | Majburiy. Matn satri boshlanishining x koordinatasi |
| y | Majburiy. Matn satri boshlanishining y koordinatasi |
| maxwidth | Ixtiyoriy. Matn satrining maksimal kengligi |
Misol
Shriftni 50px "Arial" qilib o‘rnating va canvas’ga to‘ldirilgan matn yozing. (10,80) pozitsiyadan boshlang:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.fillText("Hello World",10,80);
</script>
O‘zingiz sinab ko‘ring »
strokeText() metodi
strokeText() metodi "konturli" matn chizish uchun ishlatiladi.
strokeText() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| text | Majburiy. Chiziladigan matn satri (string) |
| x | Majburiy. Matn satri boshlanishining x koordinatasi |
| y | Majburiy. Matn satri boshlanishining y koordinatasi |
| maxwidth | Ixtiyoriy. Matn satrining maksimal kengligi |
Misol
Shriftni 50px "Arial" qilib o‘rnating va canvas’ga konturli matn yozing. (10,80) pozitsiyadan boshlang:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.strokeText("Hello World",10,80);
</script>
O‘zingiz sinab ko‘ring »
Misol
Shriftga qalin (bold) va kursiv (italic) uslub qo‘shing:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "bold italic 50px Arial";
ctx.strokeText("Hello World",10,80);
</script>
O‘zingiz sinab ko‘ring »
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!