Bagaimana untuk menulis segi tiga tepat dalam JavaScript

JavaScript ialah bahasa skrip yang digunakan secara meluas yang digunakan untuk mencapai kesan interaktif dan dinamik pada halaman web. Dalam bahasa ini, kita boleh melukis pelbagai bentuk dan rajah dengan mudah, termasuk segi tiga tepat, dengan hanya beberapa baris kod.

Segitiga tepat ialah rajah geometri yang sangat asas, terdiri daripada satu sudut tegak dan dua sudut lancip. Dalam artikel ini, kami akan meneroka cara menggunakan JavaScript untuk menulis program yang boleh melukis segi tiga tepat.

Mula-mula, mari belajar cara menggunakan HTML dan CSS untuk mencipta elemen Kanvas, iaitu bekas yang diperlukan untuk melukis.

Contoh HTML:

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

Contoh CSS:

canvas {
    border: 1px solid black;
}

Kod HTML di atas mencipta elemen Kanvas dengan sempadan hitam dan menetapkan lebar dan tingginya kepada 500 piksel. Seterusnya, kita perlu menyediakan beberapa kod JavaScript untuk melukis segi tiga tepat dalam elemen Kanvas ini.

Pertama, kita perlu mendapatkan elemen Canvas dalam JavaScript:

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

Seterusnya, kita perlu mendapatkan objek konteks elemen Canvas, yang mengandungi satu siri objek yang digunakan untuk melukis Kaedah grafik :

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

Sekarang, kita boleh menggunakan kaedah pada objek ctx untuk mula melukis segi tiga tepat.

ctx.beginPath(); // 开始路径
ctx.moveTo(100, 100); // 移动到起始位置
ctx.lineTo(100, 300); // 绘制垂直边
ctx.lineTo(300, 300); // 绘制水平边
ctx.closePath(); // 结束路径
ctx.stroke(); // 绘制轮廓线

Dalam kod di atas, kita mulakan laluan baharu dengan memanggil kaedah ctx.beginPath(), kemudian gunakan kaedah ctx.moveTo() untuk mengalihkan laluan ke kedudukan permulaan (100,100), dan kemudian gunakan ctx.lineTo() kaedah untuk melukis sudut tegak masing-masing Untuk dua sisi bersudut tegak segitiga, akhirnya panggil kaedah ctx.closePath() untuk menamatkan laluan, dan kemudian gunakan kaedah ctx.stroke() untuk melukis garis besar laluan.

Dengan kod di atas, kami telah berjaya melukis segi tiga tepat dalam elemen Kanvas. Walau bagaimanapun, kod lukisan sedemikian menyusahkan apabila berbilang segi tiga tepat perlu dilukis. Oleh itu, kita boleh merangkumnya ke dalam fungsi untuk memanggil terus apabila diperlukan.

function drawRightTriangle(x, y, width, height) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x, y + height);
    ctx.lineTo(x + width, y + height);
    ctx.closePath();
    ctx.stroke();
}

Dalam kod di atas, kami mentakrifkan fungsi bernama drawRightTriangle, yang menerima empat parameter: x dan y ialah koordinat permulaan bagi segi tiga tepat, lebar dan tinggi ialah jumlah lebar sebelah kanan. segi tiga tinggi. Fungsi ini pada asasnya sama dengan kod sebelumnya, kecuali kod untuk melukis segi tiga tepat dirangkumkan ke dalam bentuk fungsi. Apabila memanggil fungsi ini, anda hanya perlu memasukkan parameter yang sepadan untuk melukis segi tiga tepat dengan kedudukan dan saiz yang sepadan.

drawRightTriangle(50, 50, 100, 200);

Melalui kaedah di atas, kita boleh menulis atur cara dalam JavaScript dengan mudah yang boleh melukis segi tiga tepat, dan merealisasikan lukisan segi tiga tepat dengan kedudukan dan saiz yang boleh disesuaikan.

Atas ialah kandungan terperinci Bagaimana untuk menulis segi tiga tepat dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!