Menggambar kotak dengan Canvas di HTML 5

Berikut skrip untuk menggambar kotak di fitur Canvas yang tersedia di HTML 5.


context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();


Penjelasan Skrip

Baris Pertama: Memanggil fungsi penggambaran

Baris Kedua: Menggambar kotak pada koordinat 188,50 dengan lebar 200 dan tinggi 100.

Baris Ketiga: Menentukan warna kotak.

Baris Keempat: Memberikan warna kotak dengan warna yang sudah ditentukan pada baris ketiga.

Baris Kelima: Menentukan lebar garis pinggiran kotak

Baris Keenam: Menentukan warna pinggiran kotak.

Baris Ketujuh: Memberikan warna pinggiran kotak, warna sudah ditentukan pada baris keenam.


Keseluruhan Skrip.


<html>

<head>

<title>Menggambar Kotak dengan HTML5</title>

</head>

<script>

window.onload = function() {

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');


context.beginPath();

context.rect(188, 50, 200, 100);

context.fillStyle = '#8ED6FF';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'black';

context.stroke();

};


</script>

</head>

<body>

<canvas id="myCanvas" width="578" height="200"></canvas>

</body>

</html>




Gambar Kotak berhasil dibuat.


Untuk membahas artikel ini bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini ^_^

Tidak ada komentar:

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

Diberdayakan oleh Blogger.