 |
| HTML5 Bangun Datar |
Hadirnya HTML5 merupakan hal yang sangat menarik bagi para Web Developer. Hal ini sangat membantu para web developer dalam menangani berbagai kasus dalam proyek mereka. Kali ini saya akan memberikan tutorial bagaimana membuat berbagai Bangun Datar menggunakan HTML5 yang tentu saja dibarengi dengan JavaScript.
- Buat kode HTML seperti biasa, kemudian masukkan tag canvas didalam tag body, berikan ID juga agar bisa dipanggil nantinya
- Beri style di CSS agar canvasnya terlihat
- Kita akan membuat bangun datarnya pada JavaScript, berikut kode lengkap serta penjelasannya
Script HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
<style>
#canvas{
border: 1px solid;
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.scrollWidth;
canvas.height = canvas.scrollHeight;
//persegiPanjang
ctx.fillStyle = "#FF006EFF"; //untuk setting warna
ctx.fillRect(20,20,400,200); // (posisi x,posisiy,lebar,tinggi)
//persegi
ctx.fillStyle = "#007F7FFF";
ctx.fillRect(460,20,200,200);
//segitiga
ctx.beginPath(); //untuk memulai titik
ctx.moveTo(680,220); // (posisi x,posisi y)
ctx.lineTo(880,220); //lanjut ke titik (posisi x,posisi y)
ctx.lineTo(780,20);
ctx.closePath(); //titik awal otomatis menyambung ke titik akhir
ctx.fillStyle = "#FF7F7FFF"; //setting warna
ctx.fill(); //mendeklarasikan warna
//---jika kalian ingin bordernya---
// ctx.strokeStyle = "red";
// ctx.stroke();
//--------------------------------------
//jajargenjang
ctx.beginPath();
ctx.moveTo(900,220);
ctx.lineTo(1200,220);
ctx.lineTo(1250,20);
ctx.lineTo(950,20);
ctx.closePath();
ctx.fillStyle = "#7F3300FF";
ctx.fill();
//lingkaran
ctx.beginPath();
ctx.fillStyle = "#0026FFFF";
ctx.arc(90,330,80,0,Math.PI*2); //(posisi x,posisi y,diameter,,bentuk lingkaran)
ctx.fill();
// 1/2 lingkaran
ctx.beginPath();
ctx.arc(290,330,80,0,Math.PI);
ctx.fill();
//layang-layang
ctx.beginPath();
ctx.moveTo(460,320);
ctx.lineTo(560,250);
ctx.lineTo(660,320);
ctx.lineTo(560,450);
ctx.closePath();
ctx.fillStyle = "#00FF21FF";
ctx.fill();
//belahKetupat
ctx.beginPath();
ctx.moveTo(700,350);
ctx.lineTo(780,250);
ctx.lineTo(860,350);
ctx.lineTo(780,450);
ctx.closePath();
ctx.fillStyle = "#21007FFF";
ctx.fill();
//trapesium
ctx.beginPath();
ctx.moveTo(900,450);
ctx.lineTo(1200,450);
ctx.lineTo(1130,250);
ctx.lineTo(970,250);
ctx.closePath();
ctx.fillStyle = "#FFE97FFF";
ctx.fill();
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
<style>
#canvas{
border: 1px solid;
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.scrollWidth;
canvas.height = canvas.scrollHeight;
//persegiPanjang
ctx.fillStyle = "#FF006EFF"; //untuk setting warna
ctx.fillRect(20,20,400,200); // (posisi x,posisiy,lebar,tinggi)
//persegi
ctx.fillStyle = "#007F7FFF";
ctx.fillRect(460,20,200,200);
//segitiga
ctx.beginPath(); //untuk memulai titik
ctx.moveTo(680,220); // (posisi x,posisi y)
ctx.lineTo(880,220); //lanjut ke titik (posisi x,posisi y)
ctx.lineTo(780,20);
ctx.closePath(); //titik awal otomatis menyambung ke titik akhir
ctx.fillStyle = "#FF7F7FFF"; //setting warna
ctx.fill(); //mendeklarasikan warna
//---jika kalian ingin bordernya---
// ctx.strokeStyle = "red";
// ctx.stroke();
//--------------------------------------
//jajargenjang
ctx.beginPath();
ctx.moveTo(900,220);
ctx.lineTo(1200,220);
ctx.lineTo(1250,20);
ctx.lineTo(950,20);
ctx.closePath();
ctx.fillStyle = "#7F3300FF";
ctx.fill();
//lingkaran
ctx.beginPath();
ctx.fillStyle = "#0026FFFF";
ctx.arc(90,330,80,0,Math.PI*2); //(posisi x,posisi y,diameter,,bentuk lingkaran)
ctx.fill();
// 1/2 lingkaran
ctx.beginPath();
ctx.arc(290,330,80,0,Math.PI);
ctx.fill();
//layang-layang
ctx.beginPath();
ctx.moveTo(460,320);
ctx.lineTo(560,250);
ctx.lineTo(660,320);
ctx.lineTo(560,450);
ctx.closePath();
ctx.fillStyle = "#00FF21FF";
ctx.fill();
//belahKetupat
ctx.beginPath();
ctx.moveTo(700,350);
ctx.lineTo(780,250);
ctx.lineTo(860,350);
ctx.lineTo(780,450);
ctx.closePath();
ctx.fillStyle = "#21007FFF";
ctx.fill();
//trapesium
ctx.beginPath();
ctx.moveTo(900,450);
ctx.lineTo(1200,450);
ctx.lineTo(1130,250);
ctx.lineTo(970,250);
ctx.closePath();
ctx.fillStyle = "#FFE97FFF";
ctx.fill();
</script>
</body>
</html>
* untuk script yang berwarna kuning komentarUntuk Study Kasus lainnya bisa di cek disini
Bagikan
Studi Kasus | HTML5 & JavaScript | Membuat Bangun Datar
4/
5
Oleh
Unknown
