Mari kita berlatih untuk menghadapi assessment RIA pekan depan. Anda diminta untuk memainkan pekerjaan dibawah ini secara individu.
Menggambar Canvas HTML5
Buatlah hasil karya dalam bentuk gambar, menggunakan Canvas HTML5. Anda bisa menggunakan berbagai bentuk teknik dasar Shape dan Composite dari HTML5 Canvas. Pilih salah satu tema gambar yang bisa Anda buat, rincian tema adalah sebagai berikut,
- BUNGA, buatlah gambar bunga (misal bunga matahari, bunga mawar, bunga anggrek, bunga melati, dll). Bunga tersebut harus memiliki bagian kelopak, batang, dan daun, serta menggunakan warna yang sesuai dengan bentuk aslinya.
- Gedung, buatlah gambar gedung, dengan ketentuan bentuk memiliki pintu, jendela, dinding, atap, serta warna yang sesuai dengan bentuk aslinya.
Pastikan hasil gambar yang Anda buat pada canvas dapat dilihat dengan baik pada Browser Chrome.
Teknik Curve HTML5
Selain tentang keterampilan penggunaan fitur composite Canvas, Anda juga harus memahai Materi terakhir dari pembentukan objek pada Canvas adalah tentang penggunaan Curve.
- Quadratic curve, http://www.html5canvastutorials.com/tutorials/html5-canvas-quadratic-curves/
- Bezier curve, http://www.html5canvastutorials.com/tutorials/html5-canvas-bezier-curves/
Fitur Curve digunakan untuk membuat bentuk yang lebih bebas, misalnya untuk membuat logo, bentuk bunga atau apapun sesuai kreasi yang kita inginkan. Detil penggunaan Quadratic dan Bezier Curve bisa Anda dapatkan pada 2 link refensi diatas. Berikut ini contoh penggunaan Curve yang telah dikombinasikan untuk membuat suatu objek.
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d');// Quadratric curves example ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill(); } }
Semakin Anda sering melihat contoh-contoh penerapan Canvas, baik untuk pembuatan objek maupun animasi, maka akan semakin membuat Anda mahir dan terampil. Ini merupakan “Best Practice” atau jalan terbaik bagi Anda, karena perkembangan teknologi Canvas sangat cepat saat ini. Informasi dan cara penggunaan bisa dengan mudah kita dapatkan di Internet. Berikut ini salah satu contoh pengguna Canvas untuk membuat objek secara Dinamis, dengan memanfaatkan algoritma pada Javascript.
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.translate(75,75);for (var i=1;i<6;i++){ // Loop through rings (from inside to out) ctx.save(); ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';for (var j=0;j<i*6;j++){ // draw individual dots ctx.rotate(Math.PI*2/(i*6)); ctx.beginPath(); ctx.arc(0,i*12.5,5,0,Math.PI*2,true); ctx.fill(); }ctx.restore(); } }
Silahkan Anda coba contoh diatas, dan amati bagaimana penggunaan Looping yang justru bisa mempermudah kita dalam membuat objek. Lakukan modifikasi pada script diatas untuk membuat objek menarik lainnya.
Animation Canvas HTML5
Setiap objek yang Anda buat, bisa digerakkan secara interaktif, karena adanya fitur Animasi pada Canvas HTML5. Selain itu, objek yang kita buat juga bisa mengenali aktifitas interaktif, seperti klik mouse atau drag & drop. Ada beberapa contoh gerakan animasi pada Canvas HTML5, silahkan Anda pelajari detailnya pada link dibawah ini.
- Acceleration Quadratic Motion, http://www.html5canvastutorials.com/advanced/html5-canvas-quadratic-motion-animation/
- Oscillation motion, http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/
- Start & Stop Motion, http://www.html5canvastutorials.com/advanced/html5-canvas-start-and-stop-an-animation/
- Linear Motion, http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/