Canvas merupakan salah satu dari banyak fitur baru yang menarik di html5. Dengan canvas kita bisa mengambar sebuah object pada halaman web tanpa perlu menggunakan file gambar seperti pada versi HTML sebelum nya. Pada canvas kita juga bisa membuat animasi tanpa menggunakan bantuan third party aplikasi seperti flash.
Dengan elemen canvas ini, kita juga bisa mengambar grafik dengan melalui script, biasanya menggunakan java script.
Canvas memiliki beberapa metode untuk membuat gambar berupa garis, kotak, lingkaran, karakter dan menambah gambar. Canvas dispesifikasi dengan elemen "<canvas>" seperti contoh berikut
Properti fillrect atas memiliki parameter (0,0,100,75). Artinya kira-kira: Buatlah persegi panjang 100x75dikanvas, mulai dari pojok kiri atas (0,0)
Nah dibawah ini contoh script lain untuk meletakkan sebuah gambar pada canvas :
Maka lihat hasil nya..
berikut ulasan dari saya mohon kritik dan saran nya - terima kasih
Dengan elemen canvas ini, kita juga bisa mengambar grafik dengan melalui script, biasanya menggunakan java script.
Canvas memiliki beberapa metode untuk membuat gambar berupa garis, kotak, lingkaran, karakter dan menambah gambar. Canvas dispesifikasi dengan elemen "<canvas>" seperti contoh berikut
<canvas id='mycanvas" width="200" height=100.,/canvas>Elemen canvas tidak memiliki kemampuan mengambar sendiri. semua gambar harus dilakukan di dalam java script. Berikut ini contoh sederhana penerapan nya.
<!DOCTYPE html>
<html>
<body>
<canvas id="kanvasku" width="200' height="100' style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("kanvasku");
var ctx=c.GetContext("2d");
ctx.fillStyle="#cccccc';
ctx.fillRect(0,0,100,75);
</script>
</body>
</html>
Hasil dari kode diatas
Java Script menggunakan id untuk menemukan elemen <canvas>
Lalu membuat obyek nya dengan script ini :var c=document.getElementById("kanvasku");
var ctx=c.GetContext("2d");Sedangkan 2 baris ini adalah menggambarkan kotak :
ctx.fillStyle="#cccccc';Atribut fillStyle mengisi kotak dengan warna abu abu dan atribut fillrect menentukan bentuk posisi dan ukuran.
ctx.fillRect(0,0,100,75);
Properti fillrect atas memiliki parameter (0,0,100,75). Artinya kira-kira: Buatlah persegi panjang 100x75dikanvas, mulai dari pojok kiri atas (0,0)
Nah dibawah ini contoh script lain untuk meletakkan sebuah gambar pada canvas :
<!DOCTYPE html>
<html>
<body>
<canvas id="kanvasku" width="200" height="300" style="border : 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("kanvasku");
var ctx=c.GetContext("2d");
var img=new image ( ) ;
img.onload = function ( ) {
ctx.drawImage (img,0,0);
};
img.src="sampul.jpg" ;
</script>
</body>
</html>
berikut ulasan dari saya mohon kritik dan saran nya - terima kasih
0 komentar