Canvas’da chizish
JavaScript yordamida canvas’da chizish
Canvas’da chizish JavaScript yordamida amalga oshiriladi.
Canvas dastlab bo‘sh bo‘ladi. Biror narsani ko‘rsatish uchun render kontekstiga murojaat qilib, unda chizadigan skript kerak.
Quyidagi misolda canvas’ga (0,0) pozitsiyadan boshlab kengligi 150 va balandligi 75 bo‘lgan qizil to‘rtburchak chiziladi:
Misol
<canvas id="myCanvas" width="200" height="100" style="border:1px solid black;">
</canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 75);
</script>
O‘zingiz sinab ko‘ring »
1-qadam: Canvas elementini topish
Avvalo <canvas> elementini topishingiz kerak.
<canvas> elementiga HTML DOM’ning getElementById() metodi orqali murojaat qilasiz:
const canvas = document.getElementById("myCanvas");
2-qadam: Chizish obyektini yaratish
Ikkinchidan, canvas uchun chizish obyekti kerak bo‘ladi.
getContext() metodi chizish uchun vositalarga (xususiyatlar va metodlarga) ega obyektni qaytaradi:
const ctx = canvas.getContext("2d");
3-qadam: Canvas’da chizish
Nihoyat, canvas’da chizishingiz mumkin.
fillStyle xususiyati yordamida to‘ldirish rangini qizil qilib o‘rnating:
ctx.fillStyle = "red";
fillStyle xususiyati rang, gradient yoki naqsh (pattern) bo‘lishi mumkin.
fillStyle’ning standart qiymati — qora.
fillRect(x, y, width, height) metodi canvas’ga to‘ldirish uslubi rangi bilan to‘ldirilgan to‘rtburchak chizadi:
ctx.fillRect(0, 0, 150, 75);
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!