Membuat busur di css

<canvas></canvas>

Koordinat horizontal pusat busur

<canvas></canvas>

Koordinat vertikal pusat busur

Jari-jari busur. Harus positif

Sudut awal busur dalam radian, diukur dari sumbu x positif

<canvas></canvas>

Sudut di mana busur berakhir dalam radian, diukur dari sumbu x positif

<canvas></canvas>

Nilai boolean opsional. Jika

<canvas></canvas>

<canvas></canvas>

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();

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

Bagaimana Anda membuat setengah lingkaran di CSS?

Bagaimana cara membuat lingkaran di CSS?

Bagaimana Anda membuat bentuk oval di CSS?

Bagaimana cara membuat busur di JavaScript?