Belajar HTML5 Canvas

Dalam tutorial belajar HTML5 kali ini kita akan membahas tentang html5 canvas. Canvas merupakan salah satu dari banyak feature di html5. Dengan canvas kita bisa melakukan drawing / menggambar sebuah object pada halaman web tanpa menggunakan image, pada canvas kita juga membuat sebuah animasi tanpa menggunakan bantuan third party aplikasi seperti flash.

Elemen canvas html5 ini bisa menggambar grafik dengan cepat melalui scripting (biasanya menggunakan javascript). Kanvas memiliki beberapa metode untuk path gambar, kotak, lingkaran, karakter, dan menambah gambar.

Browser yang support untuk html5 canvas ini adalah internet explorer 9, firefox, oprea, chrome dan safari. Canvas dispesifikasikan dengan elemen <canvas> sebagai berikut:

<canvas id=”myCanvas” width=”200″ height=”100″></canvas>

Elemen <canvas> tidak memiliki kemampuan menggambar sendiri. Semua gambar harus dilakukan di dalam JavaScript. Mari kit alihat sebuah contoh sederhana berikut ini.

</p>
&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;body&gt;

&lt;canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"&gt;

Your browser does not support the canvas element.

&lt;/canvas&gt;

&lt;script type="text/javascript"&gt;

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

Hasilnya : Yup, sebuah kotak berwarna merah.

Kita akan membahas script HTML5 tersebut secara detil pada tulisan berikutnya, plus….manambahkan bunga pada kotak tersebut.

Sri Wulandari

Saya senang menulis, menggambar, dan belajar otodidak.

Bagikan Artikel