Kanvas dalam Javascript ~ Pemrograman dan Teknologi

Untuk menggambar di sebagian halaman HTML, kita bisa menggunakan Canvas. Canvas bisa kita gunakan untuk membuat game, atau aplikasi yang butuh gambar. Untuk menggunakan canvas, kita perlu menyediakan tag <canvas>.

Menampilkan Persegi atau Persegi Panjang dengan Method rect()
Kita bisa mendapatkan objek yang mewakili canvas yang akan kita gunakan dengan document.getElementById(). Setelah itu, kita perlu mendapatkan context-nya dengan method getContext() dari object yang dimiliki tag <canvas>. Jika sudah mendapatkan context-nya, kita bisa mengubah isi dari canvas dengan menggunakan properti-properti dan method-method dari context tersebut.

Contohnya bisa dilihat di bawah ini :

<HTML>
<HEAD>
    <title>Belajar HTML</title>
</HEAD>
<BODY>
<Canvas width="400" height="400" id="kanvasku">
    Tidak bisa menampilkan Canvas
</Canvas>
<Script>
    kanvas=document.getElementById("kanvasku");//dapatkan canvas
    ct=kanvas.getContext("2d");//dapatkan context

    //atur warna
    ct.fillStyle="yellow";
    ct.strokeStyle="green";
    ct.lineWidth=4;

    //Gambar Persegi
    ct.beginPath();
    ct.rect(0, 0, 300, 400);
    ct.fill();
    ct.stroke();
</Script>
</BODY> 
</HTML>

Contoh di atas berisi script yang menampilkan gambar persegi dengan method rect(). Sebelum menggunakan method rect(), kita harus menggunakan fillStyle untuk menentukan warna bagian dalam perseginya. Jika ingin menggunakan garis luar, warna garis persegi panjangnya bisa kita tentukan dengan properti strokeStyle. Warna yang bisa kita gunakan bisa berupa nilai hexadesimal atau konstanta warna yang diapit dengan tanda kutip.

Menggambar Lingkaran?
Pada Contoh di atas kita menggambar kotak di canvas dengan warna kuning dan garis tepi berwarna hijau. Warna bagian dalam saat kita menggambar sesuatu di canvas bisa ditentukan dengan fillStyle, dan warna garis luarnya bisa ditentukan dengan strokeStyle. lineWidth digunakan untuk menentukan ketebalan garis luar dari bentuk yang akan kita gambar.

Jika pada contoh di atas kita menggambar bentuk kotak persegi panjang dengan method rect(), berikutnya, kita akan menggambar setengah lingkaran. Untuk membuat lingkaran, kita menggunakan method arc(). Untuk membuat lingkaran, kita bisa menggunakan properti "Math.PI" yang digunakan untuk menunjukkan sudut 180 derajat dalam satuan rad (radian). karena π rad sama dengan 180 derajat, maka "2*π rad" adalah sudut yang sama dengan 360 derajat.

Pola penulisan parameter method arc adalah sebagai berikut.

arc(x, y, radius, sudut_awal, sudut_akhir);

kanvas=document.getElementById("kanvasku");//dapatkan canvas
ct=kanvas.getContext("2d");//dapatkan context

//Atur warna
ct.fillStyle="yellow";
ct.strokeStyle="green";
ct.lineWidth=4;

//Gambar Lingkaran
ct.beginPath();
ct.arc(200, 200, 200, Math.PI, 2*Math.PI);
ct.fill();
ct.stroke();

Ganti script pada kode HTML sebelumnya dengan script di atas!

Perbedaan pada script tersebut dengan script sebelumnya hanya method arc() yang menggantikan method rect(). Method rect() maupun arc() harus diletakkan setelah method beginPath() agar hasilnya bisa ditampilkan setelah diberi warna dengan Method fill() sesuai dengan nilai fillStyle(). nilai dari fillStyle dan strokeStyle sama dengan warna yang bisa kita berikan dalam CSS.

Method stroke() digunakan untuk memberi garis luar sesuai warna dari properti strokeStyle. Selain menggambar lingkaran, garis dan kotak; kita bisa juga menampilkan file Bitmap dengan DrawImage, dan melakukan banyak hal lain dengan canvas. Tapi, itu tidak akan saya bahas di sini. Kalau penasaran, baca tulisan-tulisan saya selanjutnya.