Canvas chiziqlari
Canvas’da chiziq chizish
Canvas’da chiziq 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 chiziqning boshlang‘ich nuqtasini o‘rnatadi (chizmaydi) | Yo‘q |
lineTo(x,y) |
Canvas’da chiziqning oxirgi nuqtasini o‘rnatadi (chizmaydi) | Yo‘q |
stroke() |
Chiziqni chizadi. Standart kontur (stroke) rangi — qora | Ha |
Misol
Boshlang‘ich nuqtani (0,0) pozitsiyada, oxirgi nuqtani esa (200,100) pozitsiyada belgilang. So‘ngra chiziqni haqiqatda chizish uchun stroke()’dan foydalaning:
<script>
// Create a Canvas:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Define a new path
ctx.beginPath();
// Set a start-point
ctx.moveTo(0, 0);
// Set an end-point
ctx.lineTo(200, 100);
// Stroke it (Do the Drawing)
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
lineWidth xususiyati
lineWidth xususiyati chiziq qalinligini belgilaydi.
U stroke() metodini chaqirishdan oldin o‘rnatilishi kerak.
Misol
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
strokeStyle xususiyati
strokeStyle xususiyati chiziq rangini belgilaydi.
U stroke() metodini chaqirishdan oldin o‘rnatilishi kerak.
Misol
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
lineCap xususiyati
lineCap xususiyati chiziq uchlarining uslubini belgilaydi ("butt", "round" yoki "square").
Standart qiymat — "butt".
U stroke() metodini chaqirishdan oldin o‘rnatilishi kerak.
Misol
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!