Bagaimana untuk melukis bulatan menggunakan javascript

Cara melukis bulatan dengan javascript: 1. Tetapkan parameter yang diperlukan oleh arka 2. Set startAngle dan endAngle 3. Tetapkan arah bulatan melalui lawan jam.

Persekitaran pengendalian artikel ini: sistem windows7, javascript versi 1.8.5, komputer DELL G3

Cara melukis bulatan dengan javascript?

Cara menggunakan fungsi arka JavaScript untuk melukis bulatan dalam halaman web

Persekitaran pengendalian artikel ini: sistem windows7, versi javascript 1.8.5, komputer DELL G3

1. Tetapan parameter yang diperlukan oleh kod arka

adalah seperti berikut:

arc(x, y, radius, startAngle, endAngle, counterclockwise);

di mana 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 hujung masing-masing merujuk kepada sudut permulaan dan sudut penamat bagi bulatan tersebut ialah 0. Sudut penamat ialah Math.PI*2, yang hanya melukis bulatan

2. Mari kita terangkan 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, jadi 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 mula kepada 1 dan sudut akhir kepada 2, jadi seperti yang ditunjukkan di bawah

Kita boleh lihat di atas Titik akhir gambar pertama adalah titik permulaan gambar kedua, yang bermaksud bahawa bulatan mempunyai sudut yang tidak terkira Selagi anda menetapkan sudut mula dan sudut akhir, ia boleh menyambungkan dua titik bentuk arka! 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 ikut arah jam (salah)

Anda lihat, apabila saya menetapkan titik permulaan kepada 0, titik akhir ialah 1, apabila saya 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 dan titik akhir kepada 1, apabila Saya memilih 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();

Disyorkan kajian: "Tutorial Asas JavaScript"

Atas ialah kandungan terperinci Bagaimana untuk melukis bulatan menggunakan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!