Skip Loading

[HTML5] Basic Tutorial menggambar canvas menggunakan javascript

Fitur HTML 5 yang paling menarik bagi saya adalah elemen canvas. Canvas bisa dikatakan adalah salah satu fitur "adobe flash killer", selain juga dukungan html 5 terhadap file video. Dengan canvas kita dapat melakukan hal-hal yang dulu hanya bisa dilakukan dengan adobe flash, seperti manipulasi bitmap, menggambar graphic, hingga menampilkan animasi. Pada tutorial ini kita akan mempelajari perintah dasar untuk menggambar basic shape pada canvas seperti garis, busur, kotak dll.

Canvas saat ini telah didukung oleh hampir semua browser yang mendukung HTML5, seperti firefox 3, ie 9, chrome, safari, opera, dll.

Menggunakan canvas

Untuk menggunakan canvas cukup dengan kode berikut:

<canvas id="canvas" height="400" width="300">
    Sorry, your browser does not support canvas.
</canvas>

Pada browser yang mendukung canvas, tidak akan kelihatan apa-apa, karena canvas kita masih kosong, sedangkan pada browser yang tidak mendukung canvas akan muncul teks "Sorry, your browser does not support canvas.".

Untuk mengakses canvas dari javascrit, gunakan code berikut:

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

perintah canvas.getContext("2d") digunakan untuk melakukan perintah-perintah pada canvas.

Menggambar basic shape

Koordinat.

System koordinat pada canvas adalah seperti pada gambar berikut: x adalah sumbu horisontal dan y adalah sumbu vertikal

Selanjutnya kita akan mencoba untuk mengambar basic shape pada canvas, seperti garis, lingkaran, kotak, dll.

Line (garis)

Untuk menggambar garis, gunakan fungsi javascript lineTo(x,y), dimana x dan y adalah koordinat akhir garis, secara default garis di mulai dari titik 0,0 (pojok kiri atas). Untuk memulai garis dari suatu titik, gunakan fungsi moveTo(x,y).

Contoh code:

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.strokeStyle="green";
context.moveTo(30,40);
context.lineTo(145,120);
context.stroke();

Fungsi context.stroke(); adalah fungsi untuk menggambar garis yang telah ditentukan oleh fungsi moveTo dan lineTo.  Kita dapat membuat beberapa garis sekaligus sebelum memanggil fungsi stroke().

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.moveTo(30, 40);
context.lineTo(145, 120);
context.lineTo(145, 200);
context.moveTo(400, 300);
context.lineTo(155, 200);
context.strokeStyle="green";
context.stroke();

Arc (busur)

Untuk menggambar busur gunakan fungsi :arc(x,y,radius,startAngle,endAngle,direction);, dimana x,y adalah koordinat titik tengah busur, startAngle dan endAngle adalah sudut mulai dan akhir (keduanya dalam radian), dan direction adalah arah gambar busur (true untuk searah jarum jam dan false untuk berlawanan jarum jam). Untuk conversi dari derajat ke radian gunakan fungsi javascript : radians = (Math.PI/180)*degrees.

var ctx = document.getElementById('canvas').getContext('2d');
ctx.arc(180,180,70,0,Math.PI,true);
ctx.stroke();

Kode di atas akan menggambar busur setengah lingkaran (Math.PI = 3.14 radian = 180o). Lihat gambar dibawah untuk penjelasannya secara visual:

fungsi arcTo(x1, y1, x2, y2, radius) digunakan untuk menggambar busur dari titik x1,y1 ke titik x2,y2 dengan radius tertentu.

var ctx = document.getElementById('canvas').getContext('2d'); 
ctx.arcTo(100, 150, 150, 150, 100);
ctx.stroke();

Rectangles (kotak)

Fungsi-fungsi untuk menggambar rectangle adalah sbb:

  • fillRect(x,y,width,height); Menggambar kotak dengan isi
  • clearRect(x,y,width,height); Menghapus isi kotak yang dibuat dengan fillRect
  • strokeRect(x,y,width,height); Menggambar kotak dengan kosong (border sja)

contoh code:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle = "green";
context.fillStyle = "red";
context.strokeRect(70, 70, 80, 80);
context.fillRect(80, 80, 60, 60);
context.clearRect(95, 95, 30, 30);

Curve (kurva)

Ada 2 jenis kurva yang dapat digambar, yaitu Bezier and quadratic. Bezier curve menggunakan 2 titik kontrol, sedangkan quadratic hanya menggunkan satu titik kontrol.

  • quadraticCurveTo(cp1x, cp1y, x, y) , menggambar kurva quadratic dengan koordinat titik kontrol cp1x,cpi1y dari titik mulai ke titik akhir x,y
  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) , menggambar kurva bezier dengan koordinat titik kontrol cp1x,cpi1y  dan  cp2x,cp2y dari titik mulai ke titik akhir x,y

Contoh

ctx.beginPath();
ctx.moveTo(50,20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();

Path

Untuk menggambar beberapa bentuk sekaligus kita dapat menggunakan path, tahap-tahap untuk menggambar path:

  1. Pertama buat path dengan fungsi beginPath().
  2. Buat gambar denagn fungsi-funsgi primitive spt lineTo, moveTo, acr, dll
  3. Tutup path dengan funsi closePath().
  4. Setelah itu gunakan stroke() atau fill() untuk menampilkan pada canvas.

Contoh menggambar segitiga:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var path=new Path2D();
path.moveTo(75,50);
path.lineTo(100,75);
path.lineTo(100,25);
ctx.fill(path);

Menggambar muka

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var path=new Path2D();
path.arc(75,75,50,0,Math.PI*2,true); // Lingkar muka
path.moveTo(110,75);
path.arc(75,75,35,0,Math.PI,false);  // Mulut (clockwise)
path.moveTo(65,65);
path.arc(60,65,5,0,Math.PI*2,true);  // Mata kiri
path.moveTo(95,65);
path.arc(90,65,5,0,Math.PI*2,true);  // Mata kanan
ctx.stroke(path);

Menggambar hati:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var path = new Path2D();
path.moveTo(75,40);
path.bezierCurveTo(75,37,70,25,50,25);
path.bezierCurveTo(20,25,20,62.5,20,62.5);
path.bezierCurveTo(20,80,40,102,75,120);
path.bezierCurveTo(110,102,130,80,130,62.5);
path.bezierCurveTo(130,62.5,130,25,100,25);
path.bezierCurveTo(85,25,75,37,75,40);
ctx.fill(path);

Untuk sample code bisa dilihat di sini.

www.paulussetyo.com

Related Posts
Comments ( 0 )
Add Comment

Your email address will not be published. Required fields are marked *