Catatan belajar kanvas: menggambar jalur sederhana

Langkah-langkah umum menggambar segmen garis:

moveTo(x,y) memindahkan kuas ke titik koordinat yang ditentukan (x,y)

lineTo(x,y) menggunakan garis lurus untuk menghubungkan titik akhir saat ini dan titik koordinat yang ditentukan (x,y)

stroke() menggambar jalur saat ini atau yang sudah ada sesuai dengan gaya menggambar garis saat ini

Langkah-langkah umum menggambar jalur persegi panjang:

persegi panjang(x, y, lebar, tinggi) jalur persegi panjang, titik koordinat (x, y), lebar tinggi

stroke() atau fill menggambar atau mengisi jalur sesuai dengan gaya saat ini

Anda juga dapat menggunakan strokeRect atau fillRect yang disebutkan di atas, atau menyambungkannya menjadi persegi panjang melalui lineTo.

Pertama mari kita lihat API untuk menggambar busur:

ctx.arc(x, y, radius, startAngle, endAngle, berlawanan arah jarum jam);

x, pusat busur y, radius busur, titik awal sudut awal, titik akhir busur sudut akhir, berlawanan arah jarum jam defaultnya searah jarum jam, benar berlawanan arah jarum jam

Semua rotasi di CSS menggunakan sudut (derajat), tetapi satuan yang digunakan untuk menyatakan sudut dalam fungsi busur adalah radian, bukan sudut. Ekspresi JS sudut dan radian: radian = (Math.PI/180) * sudut (derajat).

Radian di sini dihitung berdasarkan arah positif sumbu x dan sudut putaran searah jarum jam secara default.

Ilustrasi:

(gambar dari gurun)

 ctx.beginPath();ctx.arc(200, 100, 100, 0, Math.PI / 2, false);ctx.closePath();ctx.stroke();ctx.fill();

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.