Bagaimana untuk melukis segi empat sama menggunakan javascript

Melukis petak menggunakan JavaScript adalah mudah, anda hanya perlu mengetahui API lukisan biasa. Dalam artikel berikut, kami akan menerangkan cara melukis segi empat sama menggunakan API Kanvas JavaScript.

Langkah 1: Buat elemen kanvas

Mula-mula, kita perlu mencipta elemen kanvas dalam halaman HTML untuk melukis segi empat sama. Kita boleh menggunakan kod berikut:

<canvas id="myCanvas" width="200" height="200"></canvas>

di mana parameter id digunakan untuk mengenal pasti elemen kanvas secara unik, dan parameter lebar dan ketinggian digunakan untuk menetapkan saiz elemen kanvas.

Langkah 2: Dapatkan elemen kanvas

Dalam JavaScript, kita perlu menggunakan kaedah document.getElementById() untuk mendapatkan elemen kanvas. Kita boleh menghantarnya kepada kaedah berdasarkan parameter id seperti yang ditunjukkan di bawah:

const canvas = document.getElementById("myCanvas");

Sekarang kita telah memperoleh elemen kanvas, kita mesti melukis seterusnya menggunakan konteks lukisan kanvas.

Langkah 3: Lukis segi empat sama

Kita boleh melukis segi empat sama dengan menyatakan empat titik segi empat sama. Untuk melukis segi empat sama, kita perlu menentukan koordinat sudut kiri atas dan kanan bawah. Kod berikut boleh digunakan untuk melukis segi empat sama merah:

const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

Dalam kod ini, kita mula-mula mendapatkan konteks lukisan kanvas. Seterusnya, kami menetapkan warna segi empat sama menggunakan warna isian (merah). Dengan bermula pada kedudukan 50, 50 dan menentukan lebar dan ketinggian 100, kami berjaya mencipta petak 100x100.

Langkah 4: Laksanakan interaktiviti

Untuk meningkatkan interaktiviti, kita boleh menggunakan kaedah JavaScript AttachEvent untuk mengikat acara tetikus pada elemen kanvas. Dengan cara ini, apabila pengguna mengklik pada elemen kanvas, kita boleh melukis segi empat sama lain. Berikut ialah kod pelaksanaan lengkap:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
canvas.addEventListener("click", handleClick);

function handleClick(event) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.fillStyle = "red";
  ctx.fillRect(50, 50, 100, 100);
  ctx.beginPath();
  ctx.fillStyle = "blue";
  ctx.fillRect(150, 150, 50, 50);
}

Dalam contoh ini, kami menetapkan pendengar acara klik untuk elemen kanvas Apabila pengguna mengklik, kami mengosongkan kanvas dan melukis yang berwarna biru di lokasi baharu .

Ringkasan

Dalam artikel ini, kami menunjukkan cara melukis segi empat sama menggunakan API Kanvas dalam JavaScript. Di sini kami hanya merangkumi beberapa pengetahuan asas melukis petak dalam JavaScript. Di samping itu, terdapat kaedah lain yang boleh digunakan untuk melukis, seperti laluan, garisan, lorekan dan banyak lagi. Walau bagaimanapun, apabila kita memahami asasnya, kaedah lain tidak sukar untuk dikuasai. Seterusnya, anda boleh beralih kepada kaedah lukisan yang lebih kompleks untuk memperkayakan pengalaman pembangunan HTML dan JavaScript anda.

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