Bermain dengan Segitiga di HTML5 Canvas

Sekarang saya akan berbagi cara untuk bermain dengan tag <canvas> di HTML5. Tag <canvas> digunakan untuk menggambar grafik melalui script. Yang biasanya menggunakan JavaScript.

Contoh menggunakan <canvas> pada post ini bisa dilihat dihalaman depan (home) web saya. Saya menggambar dua buah segitiga yang saling berlawanan. Segitiga bisa berubah secara acak (random), bisa dilihat dari ukuran, lokasi dan warnanya setiap kali di refresh.

Siapkan file dengan nama bermain-segitiga.html. Nama file bisa diganti sesuai kebutuhan. Isi dengan kode dibawah ini,

<head>
<meta charset="utf-8">
<title>Bermain dengan Segitiga Di HTML5 Canvas</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

<style>
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
</style>
</head>
<body>
<canvas></canvas>

<script>
</script>

</body>

Kode diatas mempersiapkan tag <canvas> dengan posisi absolute, lebar dan tingginya memenuhi seluruh halaman yang tersedia. Tag <script> masih dikosongkan, dan nanti akan diisi dengan kode JavaScript.

Mengisi tag <script> dengan kode JavaScript untuk membuat segitiga,

Kode diatas saya berikan komentar agar mudah dipahami. Untuk membuat segitiga bagian kanan adalah dengan cara membalik titik-titik yang ada di segitiga disebelah kiri agar bisa membentuk arah yang berlawanan.

Like what you read? Give Hazuli Fidastian a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.