Materi ini membahas tentang dasar penggunaan Canvas HTML5 pada tampilan interkatif web. Pada penerapannya, teknik ini sering digunakan untuk membuat tampilan responsive, objek, multimedia advance, bahkan yang populer adalah untuk pengembangan Games.
Sebelum membahas lebih lanjut mengenai Canvas HTML5, maka Anda disarankan untuk me-Review lagi materi tentang CSS Animation. Silahkan untuk lebih lanjut mempelajari beberapa tutorial penting tentang Transition, Transform dan Animation pada CSS3, serta penggunaan Keyframe, Cekidot:
Pastikan Anda mencoba contoh-contoh tersebut, dan mahir menggunakan berbagai script CSS3 untuk Animation.
Basic Canvas HTML5
Pada dasarnya konsep penggunaan Canvas ini merupakan penggabungan penggunaan HTML5 dan Javascript. Referensi lebih lanjut bisa Anda lihat di link berikut ini,
- Tutorial Dasar : http://www.html5canvastutorials.com/tutorials/html5-canvas-element/
- Contoh penggunaan Canvas : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial
Buku tersebut cukup banyak dan lengkap membahas penggunaan Canvas, membuat objek serta dasar animasi Canvas. Anda juga bisa langsung melihat contoh-contoh kasus pada buku itu, yang di share secara online pada link berikut ini,
Jika ada kesulitan, silahkan untuk bertanya pada kolom komentar dibawah ini.
Composite Canvas : source-over dan destination-over
Silahkan Anda pelajari teknik penggabungan objek Canvas, dengan teknik Composite Operations. Berikut ini contoh dasar untuk penggabungan objek yang bisa dikreasikan menjadi bentuk tertentu.
<canvas id=”myCanvas”></canvas>
<script>var c=document.getElementById(“myCanvas”);var ctx=c.getContext(“2d”);ctx.fillStyle=”red”;ctx.fillRect(20,20,75,50);ctx.globalCompositeOperation=”source-over”;ctx.fillStyle=”blue”;ctx.fillRect(50,50,75,50);ctx.fillStyle=”red”;ctx.fillRect(150,20,75,50);ctx.globalCompositeOperation=”destination-over”;ctx.fillStyle=”blue”;ctx.fillRect(180,50,75,50);</script>
Mari Bermain HTML5 Canvas
- Buatlah hasil karya dalam bentuk gambar, menggunakan Canvas HTML5. Anda bisa menggunakan berbagai bentuk teknik dasar Shape dan Composite dari HTML5 Canvas.
- Buatlah Design Robot, se-kreatif mungkin, menurut imaginasi Anda. Gunakan berbagai teknik yg sudah Anda pelajari diatas tentang Canvas HTML5
- Anda bisa menambahkan berbagai kreatifitas dari bentuk Gambar yang telah dibuat, misalnya menambahkan latar belakang gedung, kendaraan perang robot, atau musuh robot. Buat semenarik mungkin
- Hasil karya dalam bentuk file .html, yang dapat tampil dengan baik pada Browser Chrome.
- tambunan[at]tass[dot]telkomuniversity[dot]ac[dot]id