HTML5 Canvas

by

Kamu pernah menggambar kan?

Untuk menggambar kita pasti butuh tempat untuk digambar kan?

Tempat itu bisa tembok (hayooo), mobil bapak (jangan), kertas atau canvas.

Nah, definisi canvas di html 5 adalah tempat atau area di halaman web untuk menggambar grafis dengan javascript.

Jadi, canvas ini tempat gambarnya, pensil yang digunakan adalah javascript.

Apa yang bisa kamu gambar?

HTML5 Canvas

Element html canvas adalah:

<canvas id="iniCanvas" width="300" height="150"></canvas>

Atribut id iniCanvas berukuran width 300px dan height 150px. ID iniCanvas inilah yang menjadi penghubung antara javascript dengan canvas.

Gambar garis

Saya mencoba menggambar garis diagonal dengan kode html:

<canvas id="iniCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Browsermu tidak support html5.</canvas>

<script>
var c = document.getElementById("iniCanvas");
var garis = c.getContext("2d");
garis.lineWidth = 5;
garis.strokeStyle = '#FF29C6';
garis.moveTo(0,0);
garis.lineTo(300,150);
garis.stroke();
</script>

Canvas yang saya buat panjang 300px tinggi 150px dengan border 1px warna abu-abu.

Untuk script saya buat variabel c untuk mengambil id iniCanvas dari html5. Kemudian mendefinisikan variabel garis.

Tebal garis lineWidth yaitu 5px, strokeStyle warna garis #FF29C6.

Hasilnya:

Your browser does not support the HTML5 canvas tag.

Gambar lingkaran

Sekarang kita mau buat gambar lingkaran:

<canvas id="iniCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
Browsermu tidak support html5</canvas>

<script>
var c = document.getElementById("iniCanvas2");
var garis = c.getContext("2d");
garis.lineWidth = 5;
garis.strokeStyle = '#FF29C6';
garis.arc(95,80,60,0,2*Math.PI);
garis.stroke();
</script>

Tambahkan kode arc(95,80,60,0,2*Math.PI); untuk buat lingkaran.

Hasilnya:

Browsermu tidak support html5

Gambar kotak

Untuk menggambar kotak, kita perlu kode:

<canvas id="imageView" width="300" height="150"></canvas>

<script type="text/javascript">
var canvas, context, canvaso, contexto;
canvaso = document.getElementById('imageView');
context = canvaso.getContext('2d');
context.lineWidth = 5;

context.strokeStyle = '#000000';
context.strokeRect(0, 0, 300, 150);
</script>

Dengan hasil:

Canvas cheatset

Berikut ini cheatset kode yang bisa kamu gunakan untuk menggambar canvas html5:

Leave a Comment