Bagaimana untuk melaksanakan persegi berongga dalam javascript-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk melaksanakan persegi berongga dalam javascript

PHPz

Lepaskan： 2023-04-27 10:33:01

asal

1331 orang telah melayarinya

Dalam pembangunan web, kita selalunya perlu menggunakan grafik untuk memperkayakan kesan paparan halaman, antaranya segi empat sama adalah salah satu grafik yang paling mudah dan paling asas. Jika kita ingin mencapai segi empat sama berongga, kita boleh melakukannya dengan menulis kod mudah dalam JavaScript.

Yang berikut akan menunjukkan kepada anda cara menggunakan JavaScript untuk melaksanakan segi empat sama berongga.

Buat fail HTML

Pertama, anda perlu mencipta fail HTML untuk melaksanakan rangka kerja asas halaman. Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript实现空心正方形</title>
    <meta charset="UTF-8">
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
<script src="script.js"></script>
</html>

Salin selepas log masuk

Di sini, kami menggunakan teg kanvas HTML5 untuk melukis grafik, dengan id "kanvas". Teg ini akan dirujuk dalam skrip JavaScript.

Tulis skrip JavaScript

Seterusnya, kita perlu menulis skrip JavaScript untuk merealisasikan fungsi melukis petak berongga dan memperkenalkannya ke dalam fail HTML.

Dalam fail skrip, kita perlu mendapatkan objek kanvas dan menetapkan lebar dan ketinggiannya untuk digunakan dalam proses lukisan seterusnya.

Kodnya adalah seperti berikut:

var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;

Salin selepas log masuk

Seterusnya, kita perlu mendapatkan objek konteks "ctx" kanvas untuk melukis grafik padanya.

Kodnya adalah seperti berikut:

var ctx = canvas.getContext("2d");

Salin selepas log masuk

Seterusnya, kita perlu menulis fungsi untuk melukis petak berongga.

Kodnya adalah seperti berikut:

function drawSquare(x, y, sideLength) {
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + sideLength, y);
  ctx.lineTo(x + sideLength, y + sideLength);
  ctx.lineTo(x, y + sideLength);
  ctx.closePath();
  ctx.stroke();
}

Salin selepas log masuk

Dalam fungsi ini, kita mula-mula menggunakan kaedah beginPath() untuk membuka laluan baharu, kemudian gunakan kaedah moveTo() untuk mengalihkan berus ke titik permulaan, dan kemudian gunakan kaedah lineTo( ) untuk menyambung garis lurus, lukis empat sisi segi empat sama, dan akhirnya gunakan kaedah closePath() untuk menyambungkan segmen baris terakhir dan menutup laluan. Gunakan kaedah stroke() untuk melukis sempadan.

Seterusnya, kita perlu memanggil fungsi ini untuk melukis petak berongga sebenar. Kodnya adalah seperti berikut:

drawSquare(100, 100, 300);

Salin selepas log masuk

Di sini, kami menetapkan titik permulaan petak berongga kepada (100,100) dan panjang sisi kepada 300. Ini akan melukis petak 300×300 pada kanvas.

Jalankan

untuk membuka fail HTML, dan anda akan melihat petak berongga dilukis.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara melaksanakan segi empat berongga menggunakan JavaScript. Kaedah ini berfungsi bukan sahaja untuk melukis petak, tetapi juga untuk melukis jenis poligon lain. Dalam projek sebenar, kita biasanya perlu melukis pelbagai grafik untuk memaparkan maklumat yang berbeza, jadi menguasai kemahiran asas lukisan ini adalah sangat penting untuk kita membangunkan kesan halaman yang sangat baik.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan persegi berongga dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!