Metode arc()_ membuat busur lingkaran yang berpusat di (x, y) dengan radius radius. Jalur dimulai pada startAngle, berakhir pada <canvas></canvas> 0, dan bergerak ke arah yang diberikan oleh <canvas></canvas> 1 (default ke searah jarum jam)
<canvas></canvas> _2
Koordinat horizontal pusat busur
<canvas></canvas> _3Koordinat vertikal pusat busur
radiusJari-jari busur. Harus positif
startAngleSudut awal busur dalam radian, diukur dari sumbu x positif
<canvas></canvas> 0Sudut di mana busur berakhir dalam radian, diukur dari sumbu x positif
<canvas></canvas> 1 OpsionalNilai boolean opsional. Jika <canvas></canvas> 8, tarik busur berlawanan arah jarum jam antara sudut awal dan akhir. Standarnya adalah <canvas></canvas> 9 (searah jarum jam)
Tidak ada (const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.stroke(); _0)
Contoh ini menggambar lingkaran penuh dengan metode arc()
HTML
<canvas></canvas>
JavaScript
Busur diberikan koordinat x 100, koordinat y 75, dan radius 50. Untuk membuat lingkaran penuh, busur dimulai pada sudut 0 radian (0°), dan berakhir pada sudut 2π radian (360°)
Metode arc() menghasilkan busur lingkaran dengan jari-jari jari-jari, berpusat di (x, y). Jalur bergerak berlawanan arah jarum jam dan dimulai di startAngle dan berakhir di endAngle (default ke searah jarum jam)
Parameter
Berikut ini adalah parameter dari metode ini −
X − Koordinat horizontal pusat busur
Y − Koordinat vertikal pusat busur
Radius − Diameter busur. Itu harus membangkitkan semangat
StartAngle − Sudut terukur sumbu x positif dalam radian tempat busur dimulai
EndAngle − Sudut akhir busur, dinyatakan dalam radian dan diukur dalam kaitannya dengan sumbu x positif
Berlawanan arah jarum jam − Indikator Boolean potensial. Menarik busur berlawanan arah jarum jam antara sudut awal dan akhir jika kondisinya benar, nilai defaultnya salah (searah jarum jam)
Untuk mendapatkan pemahaman yang lebih baik tentang cara menggambar lingkaran dengan busur di HTML5, mari kita lihat contoh berikut
Contoh 1
Dalam contoh berikut kami menggunakan arc() untuk menggambar lingkaran di kanvas kami. untuk mendapatkan lingkaran penuh kita harus menyebutkan sudut awal sebagai 0, sudut akhir sebagai 360
Saat menjalankan skrip di atas, itu akan menghasilkan keluaran yang menampilkan lingkaran yang digambar dengan ctx. busur di halaman web
CSS mampu membuat segala macam bentuk. Kotak dan persegi panjang itu mudah, karena merupakan bentuk alami jaring. Tambahkan width dan height dan Anda memiliki persegi panjang ukuran tepat yang Anda butuhkan. Tambahkan border-radius dan Anda dapat membulatkan bentuk itu, dan secukupnya Anda dapat mengubah persegi panjang itu menjadi lingkaran dan oval
Kita juga mendapatkan ::before dan ::after elemen semu di CSS, yang memberi kita potensi dua bentuk lagi yang bisa kita tambahkan ke elemen asli. Dengan pandai memposisikan, mengubah, dan banyak trik lainnya, kita dapat membuat banyak bentuk di CSS hanya dengan satu elemen HTML
Saat ini, cara terbaik untuk menggambar bentuk adalah SVG atau menggunakan clip-path dalam CSS, yang mirip dengan SVG (dan dapat mereferensikan SVG). Misalnya, lihat kumpulan ikon SVG ini, editor clip-path ini, dan pengantar kliping CSS ini. Artikel ini awalnya ditulis sebelum salah satu dari teknologi ini benar-benar digunakan