Canvas shakllari
Canvas shakllari
Canvas’da to‘g‘ri chiziqlardan iborat turli shakllarni chizish uchun quyidagi metodlardan foydalanamiz:
| Metod | Tavsif | Chizadimi |
|---|---|---|
beginPath() |
Yangi yo‘l (path) chizishni boshlayotganimizni e’lon qiladi (chizmaydi) | Yo‘q |
moveTo(x,y) |
Canvas’da shaklning boshlang‘ich nuqtasini o‘rnatadi (chizmaydi) | Yo‘q |
lineTo(x,y) |
Canvas’da shaklning oraliq nuqtasini yoki oxirgi nuqtasini o‘rnatadi (chizmaydi) | Yo‘q |
stroke() |
Chiziqni chizadi (boshlang‘ich nuqtadan oraliq nuqtalar orqali oxirgi nuqtagacha). Standart kontur (stroke) rangi — qora | Ha |
Misol
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
// Set start-point
ctx.moveTo(20,20);
// Set sub-points
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
// Set end-point
ctx.lineTo(20,20);
// Stroke it (do the drawing)
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
Ko‘proq misollar
Misol
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
strokeStyle xususiyati
strokeStyle xususiyati kontur (stroke) rangini belgilaydi.
U stroke() metodini chaqirishdan oldin o‘rnatilishi kerak.
Misol
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
// Define a rectangle
ctx.moveTo(20,20);
ctx.lineTo(180,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// Define a triangle
ctx.moveTo(100,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!