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.
Gambar Kotak berhasil dibuat.
Untuk membahas artikel ini bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini ^_^
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.