HTML5 : Canvas – Menggambar Kotak

May 10, 2014 Reza Ervani HTML5 0

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

About Reza Ervani 431 Articles

Adalah pendiri programming.rezaervani.com -

Reza in Programming

Catatan Programming Reza Ervani

HTML5 : Canvas – Menggambar Kotak

Be the first to comment

Leave a Reply Cancel reply