Oleh : Reza Ervani
بسم الله الرحمن الرحيم
Ada tiga metode menggambar kotak di HTML5 :
- fillRect(x,y,lebar,tinggi) : Metode untuk menggambar kotak berisi
- strokeRect(x,y,lebar,tinggi) : Metode untuk menggambar kotak tanpa isi
- clearRect(x,y,lebar,tinggi) : Metdoe untuk membersihkan area tertentu dan membuatnya menjadi transparan
Contoh kode :
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function gambarKotak() {
var kanvas = document.getElementById('kanvasgue');
if (kanvas.getContext) {
var ukr = kanvas.getContext('2d');
ukr.strokeRect(5,45,60,60);
ukr.fillRect(65,45,60,60);
ukr.strokeRect(125,45,60,60);
ukr.fillRect(185,45,60,60);
} else {
alert('Browser anda tidak support');
}
}
</script>
</head>
<body onload="gambarKotak();">
<canvas id="kanvasgue" width="500" height="500"></canvas>
</body>
</html>
Contoh : http://nl02.rumahilmu.or.id/contoh/html5/lingkaran.html
Leave a Reply