Mainan RIA 2015 : Design Interactive HTML5


Mari kita berlatih untuk menghadapi assessment RIA pekan depan. Anda diminta untuk memainkan pekerjaan dibawah ini secara individu.

Menggambar Canvas HTML5

Teknik Composite HTML5 Canvas

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,

  1. 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.
  2. 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.

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.

Inti dari pergerakan pada Object Canvas adalah penggunaan Frame Canvas yang di update secara berulang-ulang. Sehingga terjadi perubahan posisi pada objek Canvas. Anda diharapkan dapat mencoba berbagai contoh pada link Referensi yang diberikan diatas. Lihat juga Referensi dasar tentang Motion Animasi pada link dibawah ini,

 

 

 

,

Leave a Reply

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