Bagaimana untuk mencipta grafik separuh bulatan yang hilang dalam javascript

JavaScript ialah bahasa pengaturcaraan yang popular dan berkuasa yang sering digunakan untuk pembangunan tapak web, aplikasi dan permainan. Apabila membuat laman web, elemen grafik adalah bahagian penting. Banyak tapak web memerlukan penggunaan elemen grafik dalam pelbagai bentuk, seperti garisan, segi empat tepat, bulatan dan separuh bulatan. Dalam artikel ini, kita akan membincangkan cara membuat grafik separuh bulatan menggunakan JavaScript.

1. Memahami kaedah merealisasikan separuh bulatan

Grafik separuh bulatan biasanya terdiri daripada tiga elemen: bulatan, garisan pemotongan dan kawasan pemotongan. Jika anda ingin membuat bulatan dengan separuh daripadanya tiada, anda perlu memadamkan separuh bulatan daripada keseluruhan bulatan dan menambah garisan untuk potongan itu. Kemudian, separuh bulatan yang tinggal perlu diisi dengan warna yang sesuai.

2. Membuat bulatan dengan separuh tiada

Dalam JavaScript, membuat bulatan dengan separuh tiada memerlukan langkah berikut:

1.

2. Cipta objek konteks lukisan.

3 Gunakan kaedah beginPath() untuk mula mencipta laluan.

4. Gunakan kaedah arc() untuk mencipta laluan bulat.

5. Gunakan kaedah lineTo() untuk menambah laluan garisan pemotongan.

6 Gunakan kaedah closePath() untuk menamatkan laluan.

7 Gunakan kaedah fill() atau stroke() untuk mengisi atau stroke.

8. Tetapkan gaya dan tambahkan grafik pada halaman.

Berikut ialah contoh kod JavaScript untuk melaksanakan bulatan dengan separuh daripadanya tiada:

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');

canvas.width = 200;
canvas.height = 200;

ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.arc(
  canvas.width / 2,
  canvas.height / 2,
  100,
  (Math.PI / 2),
  -(Math.PI / 2),
  true
);
ctx.lineTo(canvas.width / 2, canvas.height / 2);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();

document.body.appendChild(canvas);

Dalam kod ini, kami mula-mula mencipta elemen kanvas dan menggunakan kaedah getContext() untuk mendapatkan objek konteks. Kemudian, kami menetapkan lebar dan ketinggian kanvas dan mula mencipta laluan menggunakan kaedah beginPath(). Seterusnya, gunakan kaedah arka() untuk mencipta laluan bulat bermula pada 90 darjah (iaitu 1/2π) dan berakhir pada -90 darjah (iaitu -1/2π), menunjukkan bahawa kita memotong separuh bahagian atas. Akhir sekali, kami menggunakan kaedah lineTo() untuk membuat garis yang menghubungkan bulatan dan menggunakan sifat fillStyle untuk mengisi bahagian bulatan yang tinggal dengan warna merah.

3. Gunakan SVG untuk merealisasikan separuh bulatan yang hilang

Apabila menggunakan JavaScript untuk membuat separuh bulatan, terdapat cara lain untuk menggunakan SVG untuk mencapainya. SVG (Grafik Vektor Boleh Skala) ialah format XML yang digunakan untuk menerangkan grafik berasaskan vektor. Menggunakan SVG, anda boleh membuat dan mengedit pelbagai jenis grafik dengan mudah, termasuk separuh bulatan dan bulatan dengan separuh daripadanya tiada.

Berikut ialah contoh kod menggunakan SVG untuk mencipta separuh bulatan yang hilang:

<svg width="200" height="200">
  <path d="M 100,100 a 100,100 0 1 1 -2,0 z" fill="red" />
</svg>

Dalam kod ini, kami mula-mula mencipta elemen SVG 200x200 piksel. Seterusnya, kami mencipta laluan menggunakan elemen laluannya. Atribut d laluan menerangkan bentuk laluan. "M 100,100" bermaksud mencipta laluan bermula dari koordinat (100,100). "a 100,100 0 1 1 -2,0 z" bermaksud menggunakan laluan lengkok elips untuk melukis bulatan dengan separuh daripadanya hilang.

4. Ringkasan

Separuh bulatan ialah elemen grafik biasa semasa membuat tapak web dan aplikasi, dan JavaScript serta SVG boleh melaksanakan bulatan dengan mudah dengan separuh daripadanya tiada. Dengan kemajuan teknologi, pembangun web mempunyai banyak alat yang berkuasa untuk mencapai pelbagai kesan grafik dan animasi yang kompleks. Walau bagaimanapun, bagi pemula, masih sangat penting untuk memahami asas dan teknik. Semasa anda belajar membuat elemen grafik, ingat untuk kekal fokus pada setiap langkah kod dan sentiasa berusaha untuk mencapai kesempurnaan.

Atas ialah kandungan terperinci Bagaimana untuk mencipta grafik separuh bulatan yang hilang dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!