Blog

HTML5 Canvas - Membuat Arc (Busur) pada Canvas HTML 5

 

HTML5 Canvas - Membuat Arc (Busur) pada Canvas HTML 5

HTML 5     2 bulan yang lalu


Untuk membuat busur dengan HTML5 Canvas, kita bisa menggunakan metode arc().

Arcs didefinisikan oleh titik pusat, jari-jari, sudut awal, sudut akhir, dan arah gambar (baik searah jarum jam atau berlawanan arah jarum jam). Arcs dapat ditata dengan properti lineWidth, strokeStyle, dan lineCap.

Lengkungan tidak lebih dari bagian lingkar lingkaran imajiner. Lingkaran khayal ini dapat didefinisikan dengan x, y, dan radius.

Selanjutnya, kita dapat mendefinisikan busur itu sendiri dengan dua titik di sepanjang lingkar lingkaran imajiner yang didefinisikan oleh startAngle dan endAngle. Kedua sudut ini didefinisikan dalam radian dan membentuk garis imajiner yang berasal dari pusat lingkaran dan memotong ujung busur yang ingin kita ciptakan.

Argumen terakhir dari metode busur adalah antiClockwise yang mendefinisikan arah jalur busur antara dua titik akhirnya. Kecuali ditentukan lain, argumen ini secara default salah, yang menyebabkan busur ditarik searah jarum jam.

Catatan: Sebagai alternatif, kita juga dapat membuat busur menggunakan metode arcTo() yang digunakan untuk membuat sudut membulat di jalur.