Canvas egri chiziqlari
HTML Canvas egri chiziqlari
Canvas’da egri chiziqlar chizish uchun eng ko‘p ishlatiladigan uchta metod:
arc()metodi (Canvas aylanalari bobida tushuntirilgan)quadraticCurveTo()metodibezierCurveTo()metodi
quadraticCurveTo() metodi
quadraticCurveTo() metodi kvadratik Bezier egri chizig‘ini belgilash uchun ishlatiladi.
quadraticCurveTo() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| cpx | Majburiy. Boshqaruv nuqtasining x koordinatasi |
| cpy | Majburiy. Boshqaruv nuqtasining y koordinatasi |
| x | Majburiy. Oxirgi nuqtaning x koordinatasi |
| y | Majburiy. Oxirgi nuqtaning y koordinatasi |
quadraticCurveTo() metodi ikkita nuqtani talab qiladi: bitta boshqaruv nuqtasi va bitta oxirgi nuqta. Boshlang‘ich nuqta — joriy yo‘ldagi so‘nggi nuqta; uni kvadratik Bezier egri chizig‘ini yaratishdan oldin
moveTo() yordamida o‘zgartirish mumkin.
Canvas’da egri chiziq chizish uchun quyidagi metodlardan foydalaning:
beginPath()- yo‘l (path) boshlashmoveTo()- boshlang‘ich pozitsiyani belgilashquadraticCurveTo()- kvadratik Bezier egri chizig‘ini belgilashstroke()- uni chizish
Misol
Ushbu kvadratik Bezier egri chizig‘i moveTo() ko‘rsatgan nuqtadan boshlanadi: (10, 100). Boshqaruv nuqtasi (250, 170) da joylashgan. Egri chiziq (230, 20) da tugaydi:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.quadraticCurveTo(250, 170, 230, 20);
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
bezierCurveTo() metodi
bezierCurveTo() metodi kubik Bezier egri chizig‘ini belgilash uchun ishlatiladi.
bezierCurveTo() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| cp1x | Majburiy. Birinchi boshqaruv nuqtasining x koordinatasi |
| cp1y | Majburiy. Birinchi boshqaruv nuqtasining y koordinatasi |
| cp2x | Majburiy. Ikkinchi boshqaruv nuqtasining x koordinatasi |
| cp2y | Majburiy. Ikkinchi boshqaruv nuqtasining y koordinatasi |
| x | Majburiy. Oxirgi nuqtaning x koordinatasi |
| y | Majburiy. Oxirgi nuqtaning y koordinatasi |
bezierCurveTo() metodi uchta nuqtani talab qiladi: ikkita boshqaruv nuqtasi va bitta oxirgi nuqta. Boshlang‘ich nuqta — joriy yo‘ldagi so‘nggi nuqta; uni kubik Bezier egri chizig‘ini yaratishdan oldin
moveTo() yordamida o‘zgartirish mumkin.
Canvas’da egri chiziq chizish uchun quyidagi metodlardan foydalaning:
beginPath()- yo‘l (path) boshlashmoveTo()- boshlang‘ich pozitsiyani belgilashbezierCurveTo()- kubik Bezier egri chizig‘ini belgilashstroke()- uni chizish
Misol
Ushbu kubik Bezier egri chizig‘i moveTo() ko‘rsatgan nuqtadan boshlanadi: (20, 20). Birinchi boshqaruv nuqtasi (110, 150) da joylashgan. Ikkinchi boshqaruv nuqtasi (180, 10) da joylashgan. Egri chiziq (210, 140) da tugaydi:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(110, 150, 180, 10, 210, 140);
ctx.stroke();
</script>
O‘zingiz sinab ko‘ring »
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!