Cara menggunakan fungsi arka JavaScript untuk melukis bulatan dalam kemahiran javascript_halaman web

1. Tetapan parameter diperlukan oleh arka

Salin kod Kod adalah seperti berikut:

lengkok(x, y, jejari, Sudut mula, Sudut hujung, lawan jam);

x, y, jejari semuanya mudah difahami, jadi mari fokus pada tiga parameter startAngle, endAngle dan lawan jam!

2. Penjelasan terperinci parameter arka

1. Sudut mula dan Sudut akhir masing-masing merujuk kepada sudut permulaan dan sudut penamat bagi bulatan Manual mengatakan bahawa sudut permulaan ialah 0 dan sudut penamat ialah Math.PI*2, supaya bulatan boleh dilukis dengan tepat <.>

2. Yang berikut menerangkan startAngle dan endAngle melalui contoh (perhatikan bahawa saya tidak menulis kod html)

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

Saya menetapkan sudut permulaan kepada 0 dan sudut penamat kepada 1, seperti yang ditunjukkan di bawah

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

Saya menetapkan sudut permulaan kepada 1 dan sudut penamat kepada 2, seperti yang ditunjukkan di bawah

Daripada perkara di atas kita dapat melihat bahawa titik akhir gambar pertama adalah titik permulaan gambar kedua, yang bermaksud bahawa bulatan mempunyai sudut yang tidak terkira banyaknya Selagi anda menetapkan sudut mula dan sudut akhir, ia boleh menyambungkan dua titik bentuk lengkok Sambungkan mereka! Perbezaan antara titik permulaan dan titik akhir ialah panjang dua titik pada graf! Apabila perbezaan antara titik permulaan dan titik akhir boleh jadi kedua-dua titik itu bertepatan, bulatan terbentuk! Mengetahui perkara ini, kita boleh membuat bulatan dinamik

3. Lawan jam merujuk kepada lawan jam (benar) atau arah jam (salah)

Anda lihat, apabila saya menetapkan titik permulaan kepada 0, titik akhir kepada 1, dan memilih mengikut arah jam

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

Apabila saya menetapkan titik permulaan kepada 0, titik akhir kepada 1 dan pilih lawan jam

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, true);
cxt.stroke();

Kandungan di atas ialah pengenalan editor tentang cara menggunakan arka fungsi JavaScript untuk melukis bulatan pada halaman web saya harap anda menyukainya.