HTML5 : Canvas – Menggambar Kotak

Oleh : Reza Ervani

بسم الله الرحمن الرحيم

HTML5_Logo_512

Ada tiga metode menggambar kotak di HTML5 :

  1. fillRect(x,y,lebar,tinggi) : Metode untuk menggambar kotak berisi
  2. strokeRect(x,y,lebar,tinggi) : Metode untuk menggambar kotak tanpa isi
  3. 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
Adalah pendiri programming.rezaervani.com -

About Reza Ervani 381 Articles
Adalah pendiri programming.rezaervani.com -

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.