Materi perkuliahan virtual ini dalam rangka pekan liburan Hari Raya Qurban. Dari materi Basic HTML5 Canvas ini diharapkan mahasiswa mengetahui teknik dasar penerapan fitur HTML5 Canvas untuk membuat bentuk atau object dengan script HTML5. Berikut ini adalah buku referensi yang harus dimiliki untuk mengetahui penggunaan dasar dari HTML5 Canvas.
Mari perhatikan contoh penggunaan Script HTML5 untuk membuat objek canvas sederhana berikut ini,
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d');context.beginPath(); context.rect(188, 50, 200, 100); context.fillStyle = 'red'; context.fill(); context.lineWidth = 7; context.strokeStyle = 'blue'; context.stroke(); </script> </body> </html>
Dari contoh sederhana diatas dapat dilihat penggunaan canvas untuk membuat objek Kotak dalam bentuk gambar. Perhatikan dengan baik pada bagian deklarasi tag <canvas> dan bagian <script> untuk menginisiasi pembuatan object rect (rectangle) yaitu bentuk kotak. Secara sederhana setiap pembuatan objek pada HTML5 Canvas harus mengikuti langkah pengerjaan berikut ini,
- Buat deklarasi tag <canvas> pada bagian body HTML
- Buat tag <script> sebagai tempat untuk menuliskan bentuk dan modifikasi dari script HTML5 Canvas
- Inisiasi penggunaan tag <canvas> pada script yang digunakan dengan memanggil class getContext(‘2d’)
- Kemudian buat objek HTML5 Canvas, misalnya untuk bentuk kotak digunakan function rect()
- lakukan modifikasi attribute class canvas untuk warna objek (fillStyle), garis pinggiran objek (strokeStyle) dan lainnya.
Referensi tentang HTML5 Canvas ?
Untuk menambah pengalaman Anda dalam menggunakan teknik Canvas ini, silahkan pelajari dan coba beberapa script yang ada pada link berikut ini.
- http://www.w3schools.com/canvas/default.asp
- konsep dasar Canvas : http://diveintohtml5.info/canvas.html
- http://www.html5canvastutorials.com/tutorials/html5-canvas-element/
- http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/
- http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/
- http://www.sitepoint.com/html5-canvas-tutorial-introduction/
- Contoh penerapan sederhana : https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
Penting untuk Anda memahami konsep pembuatan gambar atau objek menggunakan script, karena biasanya kita hanya mengetahui teknik menggambar yang langsung, tanpa menggunakan script. Beberapa teknik pembuatan bentuk yang harus Anda pahami diantaranya,
- bentuk objek : rectangle, circle, curve (bezier, quadratic), arc, path, line, dll
- bentuk tulisan : text
- menerapkan image pada canvas, dan modifikasi image
- teknik pewarnaan canvas dan modifikasi attribute class canvas
- teknik composite dan clipping region pada gabungan beberapa objek
Anda diminta untuk mencoba dan bermain dengan script HTML5 Canvas diatas, dan akan kita bahas lebih mendalam pada pertemuan kelas RIA Jumat depan.