Canvas koordinatalari
Canvas koordinatalari
HTML canvas — ikki o‘lchovli to‘r (grid).
Canvas’ning yuqori chap burchagi (0,0) koordinatalariga ega.
x va y koordinatalarini ko‘rish uchun sichqoncha kursorini quyidagi to‘rtburchak ustiga olib boring:
To‘rtburchak chizish
Canvas’da to‘rtburchak chizish uchun quyidagi metoddan foydalaning:
fillRect(x, y, width, height)- to‘rtburchakning boshlang‘ich nuqtasini hamda kengligi va balandligini belgilaydi
Misol
Boshlang‘ich nuqtani (0,0) pozitsiyada, kenglik va balandlikni esa 150px va 75px qilib belgilang:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 150, 75);
</script>
O‘zingiz sinab ko‘ring »
Chiziq chizish
Canvas’da to‘g‘ri chiziq chizish uchun quyidagi metodlardan foydalaning:
moveTo(x, y)- chiziqning boshlang‘ich nuqtasini belgilaydilineTo(x, y)- chiziqning oxirgi nuqtasini belgilaydi
Chiziqni haqiqatda chizish uchun
stroke() kabi "siyoh" metodlaridan birini ishlatishingiz kerak.
Misol
Boshlang‘ich nuqtani (0,0) pozitsiyada, oxirgi nuqtani esa (200,100) pozitsiyada belgilang. So‘ngra chiziqni haqiqatda chizish uchun stroke() metodidan foydalaning:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
Aylana chizish
Canvas’da aylana chizish uchun quyidagi metodlardan foydalaning:
beginPath()- yo‘l (path) boshlaydiarc(x, y, r, startangle, endangle)- yoy/egri chiziq yaratadi.arc()yordamida aylana yaratish uchun: startangle’ni 0 ga, endangle’ni esa 2*Math.PI ga teng qilib belgilang. x va y koordinatalari aylana markazini belgilaydi. r aylana radiusini belgilaydi
Misol
arc() metodi yordamida aylanani belgilang. So‘ngra aylanani haqiqatda chizish uchun
stroke() metodidan foydalaning:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!