i
ii
iii WEB MULTIMEDIA HTML5 CANVAS & SVG Malisa Huzaifa
iv
v WEB MULTIMEDIA HTML5 CANVAS & SVG
vi Hak Cipta Sanksi Pelanggaran Pasal 113 Undang-undang Nomor 28 Tahun 2014 Tentang Hak Cipta • Setiap Orang yang dengan tanpa hak melakukan pelanggaran hak ekonomi sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf i untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 1 (satu) tahun dan/atau pidana denda paling banyak Rp. 100.000.000,00 (seratus juta rupiah). • Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf c, huruf d, huruf f, dan/atau huruf h untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 3 (tiga) tahun dan/atau pidana denda paling banyak Rp. 500.000.000,00 (lima ratus juta rupiah). • Setiap Orang yang dengan tanpa hak dan/ a tau tanpa izin Pencipta atau pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf a, huruf b, huruf e, dan/atau huruf g untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 4 (empat) tahun dan/ a tau pidana denda paling banyak Rp. 1.000.000.000,00 (satu miliar rupiah). • Setiap Orang yang memenuhi unsur sebagaimana dimaksud pada ayat (3) yang dilakukan dalam bentuk pembajakan, dipidana dengan pidana penjara paling lama 10 (sepuluh) tahun dan/atau pidana denda paling banyak Rp4.000.000.000,00 (empat miliar rupiah).
vii WEB MULTIMEDIA HTML5 CANVAS & SVG Malisa Huzaifa Penerbit PNJ Press Anggota APPTI No: 001.004.1.06.2018
viii WEB MULTIMEDIA HTML5 CANVAS & SVG Malisa Huzaifa Editor Nunung Martina, Arliandy Pratama Desain Sampul Malisa Huzaifa Tata Letak Dimas Surya Perdana Penerbit PNJ Press Gedung Q, Politeknik Negeri Jakarta, Jl. G.A. Siwabessy, Kampus Baru UI, Depok Cetakan Pertama, November 2021 ISBN : 978-623-7342-87-8 Hak Cipta Dilindungi Oleh Undang-Undang Dilarang mengutip atau memperbanyak sebagian atau seluruh isi buku ini tanpa izin tertulis dari penerbit.
ix PRAKATA Web multimedia adalah sebuah situs web yang dirancang dengan memanfaatkan bermacam media seperti animasi, video, suara disamping nantinya juga akan ada teks dan gambar. Situs web multimedia sering langsung berhubungan dengan pengguna, bisa secara langsung mengirim video, gambar, mengontrol pengiriman suara, dan lain sebagainya. Buku ini merupakaan bahan ajar tentang web multimedia yang diharapkan nantinya dapat dipergunakan sebagai bahan acuan untuk membuat web multimedia interaktif dari sisi klien. Dibuku ini akan membahas tentang script pemrograman web multimedia interaktif yang pengolahan script-nya dilakukan pada sisi klien, yakni HTML Grafis & CSS3, AJAX, JSON dan Bootstrap. Pada buku akan membahas di bagian HTMLGrafis yang didalamnya terdapat Canvas dan SVG. Dalam penulisan buku cetakan ke 1 ini tentunya tidak luput dari kekurangan. Oleh secara terbuka kami mengucapkan terima kasih apabila terdapat kritik dan saran untuk kesempurnaan buku ini. Akhirnya semoga buku ini bemanfaat. Depok, Maret 2021 Penyusun
x
xi DAFTAR ISI PRAKATA DAFTAR ISI DAFTAR GAMBAR TINJAUAN MATAKULIAH BAB I CANVAS BAB II PATH DAN TEXT CANVAS BAB III ANIMASI PADA CANVAS BAB IV SVG BAB V SVG SHAPE Bibliografi Biografi Penulis ix xi xii xiv 1 9 51 101 107 143 144
xii DAFTAR GAMBAR Gambar I 1. Icon Browser Pendukung HTML5 Canvas Gambar I 2 Output Program Canvas dengan Style Gambar I 3 Output contoh penggunaan JavaScrip pada Canvas Gambar I 4 Diagram Kartesius Terbalik untuk Ilustrasi Koordinat pada Canvas Gambar II 1 Output membuat garis pada canvas Gambar II 2 Output dari penggunaan lineCap round, square dan butt Gambar II 3 Model penggambaran dari arc() Gambar II 4 Output pembuatan arc() pada Canvas Gambar II 5 Output program Persegi Gambar II 6 Output Memberikan Warna pada Persegi Gambar II 7 Output implementasi code ctx. clearRect(x,y,w,h) Gambar II 8 Ilutrasi langkah awal pembuatan segitiga Gambar II 9 Output pembuatan Segitiga pada Canvas Gambar II 10 Output pembuatan lingkaran pada Canvas Gambar II 11 Output text canvas menggunakan strokeText()dan fillText() Gambar II 12 Output Pembuatan Text 3D Gambar II 13 Bagian awal ketika program rotasi dijalankan pada browser Gambar II 14 Output yang terlihat ketika button diklik Gambar II 15 Output ketika button diklik secara terus menerus Gambar II 16 Output deteksi posisi kursor di Canvas Gambar II 17 Output menampilkan gambar di canvas 2 4 6 7 11 12 14 15 17 19 20 22 23 25 28 32 35 36 37 40 43
xiii Gambar II 18 Output download image pada canvas Gambar II 19 Popup yang muncul ketika button di klik Gambar II 20 Hasil gambar yang telah di download bertipe png Gambar III 1 Output animasi text sederhana Gambar III 2 Output animasi interval lingkaran Gambar III 3 Output dari animasi persi secara tanpa interval Gambar III 4 Output animasi settingan waktu Gambar III 5 Output animasi kotak bergerak Gambar III 6 Output bounc pada sebuah kotak Gambar III 7. Animasi cross image Gambar III 8 Menggambar pada canvas dengan mouse Gambar IV 1 Browser pendukung dari SVG Gambar IV 2 Ouput implementasi SVG sederhana Gambar IV 3 Ilustrasi koordinat pada SVG Gambar V 1 Output dari kotak dan persegi panjang svg Gambar V 2 Output lingkaran dan elips Gambar V 3 Output dari garis, polyline dan polygon Gambar V 4 Output dari gambar rumah Gambar V 5 Output dari jam SVG Gambar V 6 Output bintang dengan SVG Gambar V 7 Output dari menampilkan image pada svg 47 48 48 56 61 65 70 79 88 94 100 103 104 105 110 113 117 127 134 139 142
xiv TINJAUAN MATA KULIAH Mampu mempraktekkan HTML5 Canvas & SVG sehingga nantinya dapat dipergunakan sebagai bahan acuan untuk membuat web multimedia interaktif dari sisi klien.
xv
xvi
1 BAB I CANVAS Membuat sebuah Web Multimedia yang interaktif dibutuhkan bahan acuan diantaranya adalah HTML5 Canvas dan Scalable Vector Graphics (SVG) yang bisa digunakan untuk membuat Web Interaktif. Pada bab ini akan membahas tentang penjelasan HTML5 Canvas yang dimulai dari pengenalan tentang HTML5 Canvas, cara implementasi dari Canvas dan index yang ada pada HTML5 Canvas. Pada BAB ini juga akan menjelaskan bagaimana membuat code sederhana untuk implementasi Canvas pada Web. A. HTML5 Canvas Sebelum masuk ke HTML5 Canvas, kita akan coba untuk mengulas sedikit tentang bagaimana perjalanan hingga HTML5 Canvas ini dipergunakan pada Web berbasis Multimedia. Banyak elemen dan produk multimedia dulunya menggunakan Flash seperti browser yang memutar video-video menggunakan Flash dan bahkan gamegame yang ada di browser juga berbasis Flash. Hal ini berubah ketika diperkenalkan yang namanya HTML5 dimana HTML5 ini membawa hal baru yang bisa menggantikan peran dari Flash yaitu Canvas. Canvas pada reallife biasa digunakan untuk menggambar dan melukis menggunakan alat-alat lukis. Berbeda dengan Canvas yang ada pada HTML5, disini kita bisa menggambar sesuatu pada Canvas
2 dengan menggunakan code. Jadi HTML5 Canvas ini adalah tag HTML yang dapat diletakkan pada bagian script HTML untuk menggambar grafik, image dan teks menggunakan JavaScript. HTML5 Canvas ini bertipe bitmap yang merupakan representasi sebuah citra atau image yang terdiri dari titik-titik pixel. Secara default Canvas ini terlihat transparan dan memiliki ukuran lebar 300px dan tinggi 150px. Canvas ini bisa diterapkan pada browser yang versi terbaru seperti Chrome, Firefox Internet Explorer+9, Safari dan Opera. Gambar 1. Icon Browser Pendukung HTML5 Canvas B. Membuat Canvas di HTML Setelah mengetahui penjelasan singkat terkait HTML5 Canvas, maka kita akan lanjut pada penulisan canvas di HTML yang mana canvas dapat ditulis dengan menggunakan tag <canvas>. Berikut ini penulisan sederhana dari HTML5 Canvas: <canvas id="MyCanvas" width="200" height="200"> </canvas> Referensi: w3schools.com.(modifikasi) Dari code diatas id="MyCanvas" merupakan nama dari canvas yang dibuat, sedangkan width="200" height="200" adalah ukuran dari
3 canvas. Terkait ukuran, canvas dapat diatur sesuai dengan kebutuhan kita sebagai perancang. Pada canvas juga dapat ditambahkan style dengan menambahkan code style="border:1px solid #DC143C;" yang berfungsi untuk menampilkan garis tepi pada canvas. Berikut ini model code lengkap dari canvas yang menggunakan style: <!DOCTYPE html> <html> <head> <title>HTML5 Canvas</title> </head> <body> <canvas id="MyCanvas" width="200" height="200" style="border:1px solid #DC143C;"> </canvas> </body> </html> Referensi: w3schools.com.(modifikasi) style="border:1px merupakan code untuk membuat garis dengan ukuran 1px dan solid #DC143C;" digunakan untuk memberi warna pada garis yang dibuat (dipercobaan #DC143C adalah warna merah). Berikut ini hasil dari percobaan sederhana canvas ketika dijalankan pada browser:
4 Gambar 2. Output Program Canvas dengan Style Referensi: screenshot dari hasil program C. Penggunaan JavaScrip pada Canvas Setelah mengetahui tatacara pembuatan canvas pada HTML sekarang kita masuk pada penggunaan JavaScrip yang berperan sebagai alat untuk menggambar pada canvas menggunakan code. Berikut ini contoh sederhana dari implementasi JavaScrip untuk menggambar garis pada canvas: <!DOCTYPE html> <html> <head> <title>HTML5 Canvas</title> </head> <body>
5 <canvas id="MyCanvas" width="200" height="200" style="border:1px solid #DC143C;"> </canvas> </body> <script> var c = document.getElementById("MyCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 200); ctx.strokeStyle ="green"; ctx.stroke(); </script> </html> Referensi : w3schools.com.(modifikasi) Setelah kita membuat canvas pada HTML, maka kita dapat menambahkan JavaScrip dengan diawali tag <script> kemudian ditutup dengan tag </script>. Pada bagian code diatas var c = document.getElementById("MyCanvas"); bertujuan untuk memilih elemen pada HTML dengan id MyCanvas. var ctx = c.getContext("2d"); digunakan untuk membuat sebuah object dengan nama ctx yang nantinya akan kita gunakan untuk menggambar. ctx.moveTo(0, 0); dan ctx.lineTo(200, 200); adalah code untuk menentukan titik awal dan titik akhir gambar yang akan dibuat yaitu dari titik (0,0) sampai ke titik (200,200). ctx.stroke(); adalah sebuah garis yang akan kita gambar di dalamMyCanvas. Ada tambahan code yaitu ctx.strokeStyle ="green"; yang berfungsi untuk
6 memberikan warna pada garis yang kita gambar di canvas. Berikut ini hasil dari eksekusi program di atas: Gambar 3. Output contoh penggunaan JavaScrip pada Canvas Referensi image : screenshot dri hasil program Dari percobaan diatas perlu diketahui bahwasanya sebelum menggambar kita harus tentukan terlebih dahulu koordinat dari gambar yang akan kita buat pada canvas. Fungsi dari menentukan koordinat ini agar kita bisa menggunakan method yang ada pada object (dari contoh object adalah ctx) dimana object ini merupakan sebuah alat untuk menggambar pada canvas. Jadi kita perlu tentukan koordinat dari titik x dan titik y untuk memulia menggambar pada canvas. Seperti yang dikatakan pada poin sebelumnya bahwa canvas
7 terdiri dari pixel-pixel maka pembacaan koordinat seperti diagram kartesius yang terbalik. Gambar 4. Diagram Kartesius Terbalik untuk Ilustrasi Koordinat pada Canvas Referensi image : screenshot laptop sendiri (modifikasi petanikode.com) D. Beberapa Index pada HTML5 Canvas Pada canvas memungkinkan kita untuk menggambar secara terprogram ke webpage yang kita rancang baik dalam bentuk teks, gambar, garis ataupun curva. Gambar yang kita buat pada canvas dapat ditata secara baik dengan dengan index yang tersedia seperti: • stroke color, • stroke width, • shape fill color, • opacity, • shadowing,
8 • linear gradients and radial gradientss • font face, • font size, • text alignment, • text may be stroked, filled or both stroked & filled, • image resizing, • image cropping, • compositing
9 BAB II PATH DAN TEXT CANVAS Pada BAB sebelumnya kita telah membahas apa itu HTML5 Canvas dan bagaimana code sederhana dalam penggunaan Canvas. Pada bab ini kita akan lanjut pada implementasi Canvas untuk membuat path dan text dimana nanti BAB ini akan menjelaskan secara detail bagaimana tahapan pembuatan path dan text sehingga bisa di tampilkan pada Canvas. Selain itu pada BAB ini juga akan membahas tentang bagaimana membuat text 3D, rotasi serta bagaimana cara menyimpan sebuah gambar yang ada pada Canvas. A. Menggambar Garis dan Arcs pada Canvas Sebelum kita masuk lebih jauh tentang menggambar di canvas, alangkah baiknya kita mengenal dulu gambar elemen dasar pada canvas yaitu garis dan arcs disini kita akan coba bagaimana membuat sebuh gari sederhana pada canvas. Berikut ini code untuk menggambar garis pada sebuah canvas. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas</title> </head> <body>
10 <canvas id="canvas" width="300" height="300" style="border:1px solid #DC143C;"> </canvas> <script type="text/javascript"> var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); ctx.lineWidth = 10; ctx.strokeStyle = "green"; ctx.moveTo(50, canvas.height - 50); ctx.lineTo(canvas.width - 50, 50); ctx.stroke(); </script> </body> </html> Referensi : HTML5 Canvas Cookbook (modifikasi) Code diatas hamper sama dengan pembahasan pada bab sebelumnya dibagian penggunaan JavaScrip. Tetapi ada sedikit perbedaan disini, yaitu adanya penambahan sintak ctx.lineWidth = 10; yang berfungsi untuk menentukan ketebalan dari garis. Dari code diatas maka akan didapat hasil seperti berikut ini.
11 Gambar 5. Output membuat garis pada canvas Referensi image : screenshot dari hasil program Selain model garis default seperti pada Gambar II-1 pada canvas juga terdapat model lain untuk menggambarkan sebuah garis yaitu butt, round dan square. Agar dapat menggunakan fungsi round dan square maka kita harus menambahkan code ctx.lineCap = "round"; atau ctx.lineCap = "square"; pada JavaScript. lineCap sendiri model defaultnya adalah model butt. Berikut ini hasil dari penggunaan round dan square pada canvas.
12 Gambar 6. Output dari penggunaan lineCap round, square dan butt Referensi image : screenshot dari hasil program Selanjutnya kita akan masuk pada pembahasan Arcs (lengkungan). Arcs ini akan berfungsi ketika kita ingin membuat gambar seperti pelangi, orang tersenyum atau sebuah diagram. Berikut ini code untuk membuat arcs pada canvas. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas</title> </head> <body> <canvas id="canvas" width="300" height="150" style="border:1px solid #DC143C;"> </canvas> <script type="text/javascript"> var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d");
13 ctx.arc(cvs.width / 2, cvs.height / 4, 80, 2.1 * Math.PI, 0.9 * Math.PI, false); ctx.strokeStyle ="blue"; ctx.stroke(); </script> </body> </html> Referensi : HTML5 Canvas Cookbook (modifikasi) Dari program diatas dapat kita ketahui bahwasanya arc() merupakan fungsi yang digunakan untuk menggambar lengkungan/arcs pada Canvas. Detail fungsi arcs bisa ditulis sperti ini context.arc(centerX,centerY, radius, startingAngle, endingAngle,counterclockwise); dimana dapat kita ketahui bahwasanya cvs.width / 2, cvs.height / 4 digunakan untuk mengambil titik tengah dari lengkungan yang akan dibuat. Kemudian menentukan radius yang mana pada penggalan program sebelumnya radius di set 80 dan terakhir menentukan titik mulai dan titik akhir dari lengkungan yang akan dibuat. Memperjelas cara penulisan dari arc bisa dilihat dari gambar berikut ini.
14 Gambar 7. Model penggambaran dari arc() Referensi image : screenshot dari laptop sendiri (modifikasi HTML5 Canvas Cookbook) Gambar II-3 menggambarkan secara detail terkait fungsi arc() mulai dari penentuan titik center, penggambaran radius dan juga starting ending dari penggambaran garis lengkung dimana dari gambar diatas garis lengkung warna merah adalah perwakilan dari yang tampil pada Canvas. Berdasarkan code program kita memulai starting lingkaran dari 2.1 * Math.PI dan diakhiri dengan ending pada titik 0.9 * Math.PI Berdasarkan program sebelumnya yang menggunakan arc()maka dapat dilihat hasilnya pada Gambar II-4 dimana pada Canvas muncul sebuah garis melengkung berwarna
15 biru yang pada penggambaran garis itu bergerak berdasarkan arah jarum jam yaitu dari kanan ke kiri. Gambar 8. Output pembuatan arc() pada Canvas Referensi image : screenshot dari hasil program B. Menggambar Persegi, Segitaga dan Lingkaran pada Canvas Pada bagian ini kita akan belajar membuat persegi, segitiga dan lingkaran menggunakan canvas. Kita akan mulai pada bahasan pertama, yaitu membuat persegi, berikut ini code untuk membuat sebuah persegi pada canvas:
16 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas</title> </head> <body> <canvas id="canvas" width="300" height="300" style="border:1px solid #DC143C;"> </canvas> <script type="text/javascript"> var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); ctx.strokeRect(10,10,100,100); </script> </body> </html> Referensi: w3schools.com.(modifikasi) Dari rincian program diatas untuk beberapa penulisan sudah dibahas pada bab sebelumnya. Code baru yang diperkenalkan ctx.strokeRect(10,10,100,100); dimana ini berfungsi untuk membuat persegi. Penggalan code tersebut juga menjelaskan titik poin awal
17 untuk menggambar persegi yang dimulai dari titik (10,10) hingga titik (100,100). Ketika code diatas ditampilan pada browser maka akan terlihat seperti berikut. Gambar 9. Output program Persegi Referensi image : screenshot dari hasil program Dari gambar diatas kita akan coba tambahkan code ctx.fillRect(x,y,w,h); yang berfungsi untuk menambahkan warna didalam persegi dan defaultnya berwarna hitam. Berikut code lengkap untuk implementasi dari code tersebut.
18 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas</title> </head> <body> <canvas id="canvas" width="300" height="300" style="border:1px solid #DC143C;"> </canvas> <script type="text/javascript"> var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); ctx.strokeRect(10,10,100,100); ctx.fillRect(120,10,100,100); </script> </body> </html> Referensi image : petanikoding.com.(modifikasi) Jika program diatas dijalankan pada sebuah browser maka hasilnya akan seperti Gambar II.6 dimana terdapat sebuah persegi yang
19 memiliki isi berwarna hitam. Kita juga bisa mengubah warna dari persegi tersebut dengan menambahkan ctx.strokeStyle ="green"; dan ctx.fillStyle ="green"; sehingga ketika dibuka pada browser maka akan muncul kotak berwarna hijau dan kalian bisa coba praktekkan pada komputer masing-masing. Gambar 10. Output Memberikan Warna pada Persegi Referensi image : screenshot dari hasil program Selain fungsi ctx.strokeRect(x,y,w,h) dan ctx.fillRect(x,y,w,h); ada lagi yang namanya ctx.clearRect(x,y,w,h). Code ini adalah persegi
20 yang berbentuk transparan serta berfungsi untuk menghampus. Berikut ini hasil dari implementasi codenya. Gambar 11. Output implementasi code ctx.clearRect(x,y,w,h) Referensi image : screenshot dari hasil program Dari hasil output yang ditampilkan pada browser terlihat garis persegi yang tidak memiliki isi terhapus sesuai dari ukuran (x,y,w,h) yang di atur pada ctx.clearRect. Demikianlah beberapa fungsi untuk menggambar persegi yang ada pada canvas. Setelah membahas cara menggambar persegi pada Canvas, selanjutnya kita akan coba bagaimana cara menggambra segitiga menggunakan Canvas. Tidak sama dengan persegi yang disediakan
21 sebuah fungsi kusus dalam menggambar di canvas pada segita tidak ada fungsi untuk menggambar di Canvas. Tetapi kita masih dapat menggambarnya dengan cara memanfaatkan garis. Pada bagian A di BAB ini kita sudah belajar tentang bagaimana cara menggambar garis di Canvas. Berikut ini contoh code untuk menggabar segitiga pada sebuah Canvas. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas</title> </head> <body> <canvas id="canvas" width="200" height="150" style="border:1px solid #DC143C;"> </canvas> <script type="text/javascript"> var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(50, 125); ctx.lineTo(125, 125); ctx.closePath();
22 ctx.strokeStyle ="blue"; ctx.stroke(); </script> </body> </html> Referensi : petanikoding.com.(modifikasi) Dari program diatas langkah pertama yang harus dilakukan pada pembuatan segitiga adalah menentukan titik awal. Pada code diatas titik awal dicantumkan pada ctx.moveTo(50,50) yang artinya kita akan memulai menggambar dari titik (50,50). Selanjutnya kita akan menentukan kemana titik awal ini akan dihubungkan sehingga membentu sebuah garis dan pada contoh titik awal akan dihubungan ke ctx.lineTo (50, 125). Dari proses ini maka akan terbentuk sebuah gari lurus untuk bagian tinggi dari segitiga yang akan dibuat, berikut ilustrasinya. Gambar 12. Ilutrasi langkah awal pembuatan segitiga Referensi image : screenshot laptop sendiri (modifikasi petanikode.com)
23 Dari Gambar II-8 sudah bisa memberikan gambaran untuk langkat awal, kemudian lanjut untuk tahap dua dengan menyambungkan garis ke-2 kepada garis ke-3 yang mengarah kekanan dimana pada code diwakilkan dengan ctx.lineTo (125, 125) dan diakhiri dengan menghubungkan titik awal dengan titik ke-3 menggunakan ctx.closePath() yang bertugas sebagai penghubung. Berikut ini hasil dari eksekusi program yang telah kita bahas. Gambar 13. Output pembuatan Segitiga pada Canvas Referensi image : screenshot dari hasil program Selanjutnya hal terakhir yang akan kita bahas pada poin B ini adalah bagaimana cara menggambar lingkaran pada HTML5 Canvas. Sebelumnyakan kita sudah bahas tentang membuat garis
24 melengkung yang menggunakan fungsi arc(). Pada pembuatan lingkaran kita juga akan memanfaatkan fungsi tersebut. Berikut ini program lengkap untuk membuat sebuah lingkaran pada canvas. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas</title> </head> <body> <canvas id="canvas" width="200" height="200" style="border:1px solid #DC143C;"> </canvas> <script type="text/javascript"> var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2*Math.PI); ctx.strokeStyle ="green"; ctx.stroke(); </script> </body>
25 </html> Referensi : petanikoding.com.(modifikasi) Dari program diatas kita memulai membuatt lingkaran dengan cara menentukan terlebih dahulu titik pusat dari lingkaran yang akan di gambar dimana disini dimulai dari titik (100,100) dengan menggunakan ukuran jari-jari 50 pixel. Gambar lingkaran ini dimulai dari arah jam 3 (0 radian) hingga berputar searah jarum jam sampai ke titik awal lagi (2* radian). Berikut ini hasil dari eksekusi programnya. Gambar 14. Output pembuatan lingkaran pada Canvas Referensi image : screenshot dari hasil program C. Membuat Text 3D dengan Shadow Setelah mempelajari bagaimana membuat garis, persegi, segitiga dan lingkaran sekarang kita masuk ke bagian membuat text 3D
26 dengan shadow yang nanti akan ditampilkan pada sebuah canvas. Tapi sebelum masuk ke text 3D, diawal kita akan mempelajari dulu dasar untuk menampilkan sebuah tulisan pada canvas. Pada canvas terdapat dua fungsi untuk menampilkan tulisan, fungsi tersebut adalah strokeText() yang berfungsi untuk mengampilkan text hanya berupa garis-garis saja, dan fillText() yang berfungsi untuk menampilkan text dengan tulisan yang terisi dengan warna default (hitam). Pada kedua fungsi ini terdapat ketentuan penulisan yaitu strokeText(“tulisan yang akan ditampilkan”, x, y) dimana x dan y adalah titik awal untuk menampilkan tulisan. Begitu juga dengan fillText(“tulisan yang akan ditampilkan”, x, y). Berikut ini contoh program lengkap untuk menampilkan text dari kedua fungsi tersebut. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas</title> </head> <body> <canvas id="canvas" width="300" height="150" style="border:1px solid #DC143C;"> </canvas>
27 <script type="text/javascript"> var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); ctx.font = "20px italic"; ctx.fillStyle="blue"; ctx.fillText("Ini Model Tulisan fillText:",10,50); ctx.font = "30px Arial"; ctx.strokeStyle ="green"; ctx.strokeText("Ini Model strokeText",10,100); </script> </body> </html> Referensi : petanikoding.com.(modifikasi) Dari code diatas ada penambahan ctx.font yang berfungsi untuk menentukan ukuran dan jenis tulisan dari font yang akan kita tampilkan. Pada program untuk fillText() menggunakan font 20px italic sedangkan untuk srokeTeext() menggunakan font 30px arial. Dari code kita bisa lihat untuk fillText() mulai dituliskan pada canvas di titik (10,50) sedangkan untuk strokeText() dimulai dari titik (10,100). Agar lebih jelas berikut hasil dari percobaan code diatas.
28 Gambar 15. Output text canvas menggunakan strokeText()dan fillText() Referensi image : screenshot dari hasil program Demikian cara menampilkan tulisan dengan menggunakan canvas menggunakan salah satu fungsi yang telah disediakan. Terkait dengan desain dari teks yang ditampilkan, pada code sebelumnya menggunakan font untuk mengatur ukuran dan jenis text. Tidak hanya itu, pada canvas juga menyediakan textAligan yang berfungsi untuk mengatur tata letak dari tulisan, apa akan ditempatkan pada bagian kiri, kanan atau tengah dari canvas. Kemudian textBaseline yang bisa digunakan untuk mengatur tulisan untuk ditempatkan di bagian atas, bagian bawah atau alphabet. textAligan ini default terletak dibagian kiri dan untuk textBaseline default berupa alfabet.
29 Selanjutnya kita akan masuk ke bagian membuat Text 3D dengan menambahkan shadow pada text tersebut. Dimana terkadang kita sedikit bosan dengan model tulisan yang monoton dan adakalanya berkeinginan untuk menampilkan tulisan yang terlihat menarik. Pada HTML5 Canvas ini kita akan mencoba membuat text agar terlihat menarik. Berikut ini contoh program untuk membuat text 3D dengan shadow. <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas</title> </head> <body> <canvas id="canvas" width="200" height="150" style="border:1px solid #DC143C;"> </canvas> <script type="text/javascript"> var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); ctx.font = "20px italic"; ctx.fillStyle="green"; ctx.textAlign = "center";
30 ctx.textBaseline = "middle"; draw3dText(ctx, "Tulisan Text 3D ", 100, 50,3); function draw3dText(ctx, text, x, y, textDepth){ var n; for (n = 0; n < textDepth; n++) { ctx.fillText(text, x - n, y - n); } ctx.fillStyle = "black"; ctx.shadowColor = "yellow"; ctx.shadowBlur = 10; ctx.shadowOffsetX = textDepth + 2; ctx.shadowOffsetY = textDepth + 2; ctx.fillText(text, x - n, y - n); } </script> </body> </html> Referensi : HTML5 Canvas Cookbook (modifikasi) Dari program diatas kita bisa membuat tulisan berbentuk 3D dengan cara menumpukkan tulisan yang sama. Pada code diatas kita gunakan fungsi draw3dText () untuk memberikan kesan 3D pada text dengan menumpukkan tulisan yang sama (pada code menggunakan 3 tumpukan) yang mana bisa kita lihat pada penggalan code draw3dText(ctx, "Tulisan Text 3D ", 100, 50,3); yang mana
31 disini kita ingin menampilkan text dengan kata Tulisan Text 3D yang dimulai pada titik 100,50 dengan perulangan 3x. Selanjutnya kita bisa memberikan warna yang berbeda untuk tulisan yang tampak pada bagian awal agar terlihat lebih jelas dimana pada buku ini menggunakan warna hitam yang ada pada code ctx.fillStyle = "black"; dan untuk bagian tumpukan menggunakan warna hijau pada ctx.fillStyle="green";. Terakhir kita bisa tambahkan shadow agar text terlihat lebih baik dimana kita awali dengan memberikan warna pada shadow agar terlihat berbeda di ctx.shadowColor = "yellow"; lalu tentukan blur shadow (pada program shadow 10) dengan ctx.shadowBlur = 10;dan terakhir atur juga ctx.shadowOffsetX dan ctx.shadowOffsetY. Agar lebih jelas berikut ini hasil dari eksekusi program yang kita bahas. Selain pada text kita juga bisa lakukan cara diatas untuk garis, lengkungan dan lingkaran.
32 Gambar 16. Output Pembuatan Text 3D Referensi image : screenshot dari hasil program D. Membuat Rotasi pada Canvas Pada bagian ini kita akan mencoba membuat sebuah tulisan yang bisa diputer dengan menggunakan fungsi rotate(r) dimana r merupakan radian. Berikut ini contoh yang bisa kita cobakan untuk membuat rotasi pada HTML5 Canvas.
33 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas</title> </head> <body> <canvas id="canvas" width="200" height="150" style="border:1px solid #DC143C; background-color: black"></canvas> <button type="button" onclick="rotasi();">Klik</button> <script type="text/javascript"> var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); ctx.font = "30px italic"; ctx.textAlign = "center"; ctx.fillStyle = "yellow"; ctx.fillText("Rotasi", cvs.width/2, cvs.height/2); function rotasi (event) { ctx.translate(cvs.width/2, cvs.height/2); ctx.rotate((Math.PI / 180) * 15);
34 ctx.fillText("Rotasi", 0, 0); ctx.translate(-cvs.width/2, -cvs.height/2); }; </script> </body> </html> Referensi : Learning HTML5 Canvas (modifikasi) Pada program diatas langkah pertama membuat sebuah canvas dimna disini kita atur untuk warna background hitam dengan cara menambahkan background-color: black pada bagian style canvas. Kemudian kita tambahkan sebuah button untuk menggerakkan rotasi pada canvas dengancara menambakan <button type="button" onclick="rotasi();"> Klik </button>. rotasi() adalah fungsi yang nanti akan kita gunakan untuk seting gerakan rotasi ketika button diklik. Selanjutnya atur ukuran dan jenis font yang akan digunakan. Pada code kita menambahkan textAligan= “center”; dimana fungsi ini sudah dibahas pada bagian sebelumnya. Jangan lupa kita juga seting warna dari tulisan yang akan ditampilkan pada canvas. Kita gunakan ctx.fillText("Rotasi", cvs.width/2, cvs.height/2); untuk menampilkan tulisan Rotasi pada canvas dengan titik mulai cvs.width/2, cvs.height/2.
35 Setelah pengaturan untuk tulisan sudah selesai, kita akan masuk pada fungsi rotasi() yang terdapat dibutton. Kita membuat sebuah fungsi baru pada javascrip dengan cara menambahkan code function rotasi(event). Pada fungsi tersebut kita akan membuat code untuk rotasi tulisan dimana diawali dengan memeta ulang titik awal pada canvas dengan menggunakan translate() dan kemudian mulai atur rotasi dengan menggunakan rotate(). Kita juga harus tentukan lagi tulisan awal apa yang akan kita rotasikan pada fungsi rotasi() dan setelah itu tambahkan lagi translate() untuk memetakan titik awal dari pergerakkan dimana diakhir kita memetakan titik awal dari pergerakan pada (-cvs.width/2, -cvs.height/2). Ketika program dijalankan maka proses pada fungsi rotasi() akan selalu terus menerus dilakukan selama button yang disediakan kita klik secara terus menerus. Berikut hasil dari eksekusi program tersebut. Gambar 17. Bagian awal ketika program rotasi dijalankan pada browser Referensi image : screenshot dari hasil program
36 Selanjutnya ketika kita melakukan aksi dengan cara klik button maka akan tampil seperti pada Gambar II-14 dan jika diklik secara terus menerus maka akan terlihat seperti Gambar II-15. Gambar 18. Output yang terlihat ketika button diklik Referensi image : screenshot dari hasil program
37 Gambar 19. Output ketika button diklik secara terus menerus Referensi image : screenshot dari hasil program Demikianlah contoh sederhana untuk membuat rotasi pada canvas. Sebelum masuk pada materi selanjutnya kita coba bahas bagaimana cara menentukan koordinat dari kursor kita pada sebuah canvas. Hal ini bisa sangat bermanfaat jika ingin membuat sebuah game atau juga bisa digunakan untuk membuat paint sederhana yang menggunakan canvas. Berikut ini contoh program yang menampilkan bagaimana cara kita mengetahui koordinat dari kursor ketika berada pada canvas. <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas</title>
38 </head> <body> <canvas id="canvas" width="200" height="150" style="border:1px solid #DC143C;"> </canvas> <script type="text/javascript"> var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); ctx.font = "25px Italic"; cvs.addEventListener("mousemove", function(e) { var cRect = cvs.getBoundingClientRect(); var canvasY = Math.round(e.clientY – cRect.top); var canvasX = Math.round(e.clientX - cRect.left); ctx.clearRect(0, 0, cvs.width, cvs.height); ctx.fillText("X: "+canvasX+", Y: "+ canvasY,10,20); }); </script> </body> </html> Referensi : Learning HTML5 Canvas (modifikasi) Tahapan awal yang harus dilakukan adalah menyediakan sebuah canvas yang akan digunakan. Kemudian kita mulai dengan menentukan ukuran tulisan yang akan menampilkan angka koordinat
39 dari kursor. Pada program contoh kita gunakan font dengan ukuran 25px dan jenis font italic. Kemudian kita gunakan addEventListener() yang berfungsi untuk mengendalikan suatu event yang sedang tejadi didalam DOM (Document Object Model). Pada addEventListener()ditambakan instruksi mousemove, function(e). Setelah menggerakkan kursor di canvas maka gunakan getBoundingClientRect() untuk memperoleh nilai x y dari kursor tersebut. Setelah di tangkap posisi dari kursor maka gunakan Math.round(e.clientY – cRect.top); dan Math.round(e.clientX – cRect.top); untuk mengubah info yang didapat dari getBoundingClientRect() menjadi seperti yang ada di canvas. Setelah itu bersihkan pixel yang ada pada canvas dan tampilkan koordinat dari kursor dengan menggunakan ctx.fillText("X: "+canvasX+", Y: "+ canvasY,10,20); dimana canvasX dan canvasY untuk menampilkan titik x,y dari kursor. Agar lebih paham silahkan lihat hasil eksekusi dari program tersebut.
40 Gambar 20. Output deteksi posisi kursor di Canvas Referensi image : screenshot dari hasil program E. Menyimpan Gambar dari Canvas Selanjutnya kita akan bermain pada gambar dimana pada bagian ini akan mencoba menampilkan sebuah dambar pada canvas kemudian menyimpan gambar yang telah kita tampilkan. Jadi pada bagian ini kita terlebih dahulu menampilkan sebuah gambar di dalam canvas dan kemudian akan mencoba untuk save gambar tersebut dengan nama file baru. Berikut ini contoh dari program yang bisa kita gunakan untuk menampilkan gambar pada canvas.
41 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas</title> </head> <body> <p>Image yang akan di tampilkan :</p> <img id="laptop" width="200" height="200" src="laptopmee.png" alt="Laptop"> <p>Tampilan pada Canvas:</p> <canvas id="myCanvas" width="329" height="294" style="border:2px solid green;"></canvas> <script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = document.getElementById("laptop"); ctx.drawImage(img, 5, 5); }; </script> </html> </body> Referensi : w3schools (modifikasi)
42 Baiklah kita akan membahas lebih detail tentang code diatas dimana diawal tag <body> terdapat code yang berfungsi untuk menampilkan gambar menggunakan html dimana gambar ini yang akan kita gunakan kembali pada canvas. Code umum yang digunakan html untuk menampilkan gambar adalah <img id="laptop" width="200" height="200" src="laptopmee.png" alt="Laptop"> dimana kita dapat lihat bahwa ada tag <img> yang digunakan untuk menampilkan gambar, kemudian width & height berfungsi untuk menentukan ukuran gambar yang akan di tampilkan. src pada code berfungsi untuk memanggil gambar yang akan ditampilkan, pada percobaan ini kita gunakan gambar laptopmee.png. Perlu diingat file gambar harus disimpan pada satu folder bersama dengan file .html dan jika tidak maka link gambar yang digunakan harus disesuaikan. Misal kita menyimpan gambar laptopmee.png di lock disk D maka code nya bisa seperti src: ="D:\laptopmee.png". Selanjutnya seperti biasa kita sediakan terlebih dahulu canvas yang akan digunakan untuk menampilkan gambar laptopmee.png. Kemudian kita mulai pada bagian javascrip dimana disini kita gunakan window.onload yang mana ketika program di jalankan maka fungsi pada window.onload akan dieksekusi. Code pada function() sudah dibahas pada bab sebelumnya jadi kita langsung saja code yang digunakan untuk menampilkan gambar di canvas adalah ctx.drawImage(img, 5, 5); yang mana image akan digambar pada canvas mulai dari titik (5,5). Agar lebih mudah dipahami silahkan lihat hasil dari eksekusi programnya pada gambar berikut.
43 Gambar 21. Output menampilkan gambar di canvas Referensi image : screenshot dari hasil program Jadi demikianlah hasil dari eksekusi program dimana pada gambar awal menampilkan file laptopmee.png dalam bentuk html sedangkan pada gambar kedua adalah bentuk output gambar pada canvas. Dapat dilihat untuk gambar awal yang menggunakan html gambar tersebut
44 menyesuaikan dengan ukuran dari width & height yang telah ditentukan berbeda dengan canvas karena gambar yang di tampilkan pada canvas berdsarkan pixel dari gambar tersebut. Jika masih bingung silahkan cobakan code tersebut dengan mengganti gambarnya nanti akan lebih paham denga napa yang dimaksud pada buku ini. Setelah mengetahui bagaimana cara menampilkan gambar pada canvas, selanjutnya kita akan coba membuat code untuk menyimpan gambar yang ada di canvas. Berikut ini code yang bisa kita gunakan untuk menyimpan gambar dari canvas. <html> <head> <meta charset="utf-8"> <title>HTML5 Canvas</title> </head> <body> <p>Canvas yang Digambar :</p> <canvas id="canvas" width="300" height="300" style="border:2px solid green;"></canvas> <p><button type="button" id="dw" >Download Image</button></p> </body> <script type="text/javascript">
45 const btndownload = document.querySelector("#dw"); var cvs = document.getElementById("canvas"); var ctx = cvs.getContext("2d"); ctx.strokeStyle="red"; ctx.fillStyle="green"; ctx.strokeRect(10,10,100,100); ctx.fillRect(120,10,100,100); btndownload.addEventListener("click", function () { const a = document.createElement('a'); document.body.appendChild(a); a.href = canvas.toDataURL("image/png", 0.1); a.download = "canvas-kotak.png"; a.click(); document.body.removeChild(a); }) </script> </html> Referensi : w3schools (modifikasi) Dari code diatas hal pertama yang dilakukan adalah membuat sebuah canvas dan sebuah button yang berfungsi memberikan perintak download gambar pada canvas ketika di klik. Pada html untuk menampilkan sebuah button bisa menggunakan code <button type="button" id="dw" >Download Image</button> dimana code
46 ini memiliki type="button" dan id="dw" yang mana button ini kita beri nama Download Image. Setelah button dan canvas tersedia, kita mulai menggambar terlebih dahulu pada canvas, dimana pada contoh ini kita gunakan gambar yang ada materi menggambar persegi. Disini kita gunakan dua model persegi yang satunya menggunakan fill dan yang satu lagi menggunakan strok serta jangan lupa kita berikan Style dimana pada contoh kita gunakan warna merah dan green. Pada code ini kita juga tambahkan fungsi const btndownload = document.querySelector("#dw"); untuk inisialisasi javascrip dari button Download Image pada html yang sudah kita sediakan. Lanjut kita membuat aksi ketika button tersebut di klik dengan cara menggunakan code btndownload.addEventListener("click", function () { … } dimana perintah ini akan menjalankan proses pada kuring kerawal jika btndownload di klik. Jika button yang kita sediakan ada aksi maka langkah awal yang harus kita buat adalah sebuah elemen baru yang diberi nama a seperti const a = document.createElement('a'); dan document.body.appendChild(a);. Kemudian kita akan mengambil data URL dari canvas dengan tipe jpg a.href = canvas.toDataURL("image/png", 0.1); dan simpan file jpg dengan nama yang sudah kita tentukan seperti code a.download = "canvaskotak.png";. Selanjutnya kita tambahkan aksi a.click(); dan jika
47 proses selesai maka fungsi a di hapus dengan cara document.body.removeChild(a);. Hasil dari code tersebut dapat kita lihat seperti berikut. Gambar 22. Output download image pada canvas Referensi image : screenshot dari hasil program Ketika button kita klik maka nanti akan muncul popup untuk download gambar pada canvas. Setelah kita download di folder download akan kita temukan file canvas-kotak.png. Berikut hasil dari proses klik button hingga model file yang telah di download.
48 Gambar 23. Popup yang muncul ketika button di klik Referensi image : screenshot dari hasil program Gambar 24. Hasil gambar yang telah di download bertipe png Referensi image : screenshot dari hasil program
49 Demikian contoh untuk mendowload gambar yang ada pada canva. Selain menggunakan sebuah button, kita juga dapat memanfaat a href yang berfungsi seperti link dimana jika di klik maka akan aksinya, contoh pada kasus ini maka akan ada aksi download dri gambar yang ada pada canvas. Kita bisa sediakan terlebih dahulu code a href seperti berikut ini pada html body. <a id="download" download="canvas-kotak.jpg" href="" onclick="dw_img(this);">Download Image</a> Kemudian bisa menambahkan fungsi berikut pada javascript. dw_img = function(el) { var imageURI = canvas.toDataURL("image/jpg"); el.href = imageURI; }; Jika penasaran, silahkan dicobakan pada computer masing-masing karna code termasuk lebih simple implementasinya dibandingkan dengan contoh awal.
50
51 BAB III ANIMASI PADA CANVAS Pada BAB sebelumnya kita telah belajar hal-hal dasar terkait dengan canvas seperti membuat garis, membuat persegi, text dengan model 3D, mengetahui bagaimana menampilkan gambar dan menyimpan gambar dari sebuah canvas. Pada bab ini kita akan lanjut membuat animasi di Canvas mulai animasi pada text, animasi dengan interval dan animasi untuk settingan waktu. A. Animasi Sederhana Dibagian awal ini kita akan membuat sebuah animasi sederhana pada canvas. Kita akan sediakan sebuah tulisan yang bisa bergerak dari kanan kekiri secara terus menerus seperti iklan. Tulisan ini akan bergerak sesuai dengan ukuran canvas yang sudah disediakan. Berikut ini code lengkap untuk animasi sederhana.
52 <html> <head> <style> #canvas{border:3px solid black; } </style> </head> <body> <canvas id="canvas" width=500 height=400></canvas> </body> <script> const textToDisplay = "Wellcome"; const textStyle = "red"; const BGStyle = "white"; const textSpeed = 0.15; const textHorMargin = 8; var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); ctx.font = Math.floor(canvas.height * 0.5) + "px arial"; var textWidth = ctx.measureText(textToDisplay).width; var totalTextSize = (canvas.width + textHorMargin * 2 + textWidth);
53 ctx.textBaseline = "middle"; ctx.textAlign = "left"; var textX = canvas.width + 6; var textOffset = 0; var startTime; function update(time){ if(startTime == undefined){ startTime = time; } ctx.fillStyle = BGStyle; ctx.fillRect(0, 0, canvas.width, canvas.height); textOffset = ((time - startTime) * textSpeed) % (totalTextSize); ctx.fillStyle = textStyle; ctx.fillText(textToDisplay, textX - textOffset, canvas.height / 2); requestAnimationFrame(update); } requestAnimationFrame(update); </script> </html> Referensi : Learning HTML5 Canvas (modifikasi)
54 Code di atas jika dijalankan akan menghasilkan sebuah animasi tulisan yg bergerak. Langkah awal untuk membuat animasi ini adalah menyediakan sebuah canvas dimana code ini menggunakan sebuah canvas dengan id="canvas" width=500 height=400. Selain itu kita juga gunakan css code <style>#canvas{border:3px solid black;}</style> untuk memberikan warna hitam dengan ketebalan 3pixel untuk pinggiran canvas di bagian. Setelah memilik canvas, kita masuk kepada bagian javasrcip. Pada awal bagian javascrip kita tentukan terlebih dahulu tulisan apa yang akan dijadikan animasi dengan menambahkan code const textToDisplay = "Wellcome"; dimana disini kita akan membuat animasi untuk tulisan Wellcome. Kemudian tentukan warna background dari canvas dan warna dari tulisan yang akan ditampilkan dengan menambahkan const textStyle = "red"; dan const BGStyle = "white";. Selanjutnya setting kecepatan tulisan ketika muncul pada canvas dengan dengan menggunakan const textSpeed = 0.15; dan tambah jarak mulai text diluar canvas dengan menggunakan const textHorMargin = 8;. Kemudian kita mulai gunakan fungsi var canvas = document.getElementById ("canvas"); dan var ctx = canvas.getContext("2d"); untuk menentukan id canvas mana yang akan digunakan. Setelah itu tentukan ukuran font dan jenis tulisan yang digunakan pada text wellcome dengan cara menggunakan ctx.font=Math.floor(canvas.height * 0.5)+ "px arial";. Jangan lupa
55 tentukaan ukuran width dari text yang akan ditampilkan dengan menggunakan code var textWidth=ctx.measureText(textToDisplay).width; dan var totalTextSize=(canvas.width + textHorMargin * 2 + textWidth);. Atur text yang akan ditampilkan berada di posisi pinggir dengan menambahkan code ctx.textBaseline = "middle"; dan ctx.textAlign = "left";. Tulisan yang akan diberi animasi ini akan bergerak dari kanan ke kiri dengan menambahkan var textX = canvas.width + 6; dan tentukan pergerakan text yang terjadi dengan menyediakan var textOffset = 0; . Gunakan var startTime; untuk menyimpan waktu pergerakan dari text Wellcome. Kemudian buat fungsi untuk menjalankan frame animasi dengan membuat function update(time){…} dan didalam fungsi ini kita mulai dulu dengan menentukan waktu awal dari gerakan text if(startTime == undefined){ startTime = time;}. Gunakan style background yang sudah disediakan dan bersihkan layer canvas dengan mengguankan code ctx.fillStyle = BGStyle; dan ctx.fillRect(0, 0, canvas.width, canvas.height);. Selanjutnya gerakkan tulisan kea rah kiri dari kanan canvas dengan code textOffset = (time-startTime)*textSpeed)% (totalTextSize); dan tambahkan style dari text yang sudah disediakan ctx.fillStyle = textStyle;. Terakhir kita mulai melakukan render dengan menambahkan code ctx.fillText(textToDisplay,textX-textOffset,canvas.height/2).
56 Penutup tambahkan requestAnimationFrame(update); untuk menyelesaikan permintaan frame berikutnya dan setelah tutup kurung kerawal tambahkan kembali requestAnimationFrame(update); untuk melakukan perulangan pada animasi text. Berikut ini output yang didapat ketika run code sebelumnya. Dimana tulisan wellcome ini berjalan dai kanan ke kiri canvas dan akan berluang terus. Gambar 25. Output animasi text sederhana Referensi image : screenshot dari hasil program B. Animasi Interval Pada poin sebelumnya kita sudah mencobakan bagaimana membuat animasi sederhana dengan membuat tulisan berjalan di canvas.
57 Dibagian ini kita akan mencoba membuat animasi berdasarkan interval atau jarak yang sudah ditentukan. Berikut ini model code yang bisa digunakan untuk animasi berdasarkan interval. <html> <head> <style> body{ background-color:white; } #canvas{border:3px solid green; } </style> </head> <body> <canvas id="canvas" width=512 height=150></canvas> </body> <script> window.onload=(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var nextTime=0; var duration=1000; var x=30; requestAnimationFrame(animate);
58 function animate(currentTime){ if(currentTime<nextTime){ requestAnimationFrame(animate); return; } nextTime=currentTime+duration; ctx.beginPath(); ctx.arc(x,50,30,0,Math.PI*2); ctx.fillStyle='#'+Math.floor(Math.random() *16777215).toString(16); ctx.fill(); x+=60; requestAnimationFrame(animate); } }); </script> </html> Referensi : Learning HTML5 Canvas (modifikasi) Code diatas nantinyakan akan menampilkan gambar lingkaran dengan interval yang di tentukan. Disini langkah awal seperti biasa kita sediakan sebuah canvas dimana pada contoh kita menggunakan canvas dengan ukuran width=512 height=150 dan id = canvas.
59 Sebelum itu kita gunakan css untuk membuat garis tepi dan warna background dengan menambahkan body{ background-color:white; } dan #canvas{border:3px solid green; } pada bagian <style>. Selanjutnya kita masuk pada bagian javascrip yang berfungsi sebagai alat untuk menampilkan sesuatu di canvas. Pada bagian awal kita gunakan window.onload=(function(){..} yang berfungsi ketika program di run maka perintah yang ada didalam kurung kerawal akan di eksekusi secara otomatis. Seperti penjelasan diawal bahwa kita akan mencoba menampilkan sebuah lingkaran dengan interval tertentu maka pertama-tama kita gunakan var canvas = document.getElementById("canvas"); dan var ctx=canvas.getContext("2d");. Kemudian kita sediakan sebuah fungsi untuk membaca ukuran tinggi dan lebar dari canvas yang digunakan dengan tag var cw=canvas.width; dan var ch=canvas.height;. Selanjutnya kita akan tentukan waktu mulai animasi dan durasinya dengan menggunakan var nextTime=0; dimana waktu dimulai dari nilai 0 dan untuk durasi var duration=1000;. Tahapan berkutnya adalah membuat tag var x=30; yang berfungsi untuk menentukan titik x mulainya menggambar lingkaran dan nanti nilai ini akan dilakukan penambahan secara otomatis ketika proses menampilkan lingkaran telah selesai dengan cara menambahkan x+=60;. Selanjutnya kita tambahkan code yang berfungsi untuk memulai animasi requestAnimationFrame(animate); dimana disini
60 code tersebut memanggil sebuah fungsi animate. Jadi yang harus kita lakukan adalah menyediakan fungsi untuk animasi dengan cara menambahkan function animate(currentTime){..} setelah code untuk memulai animasi. Pada function animate ini kita membuat perulangan lingkaran dengan interval yang mana kita melakuka pengecekan dengan membuat if(currentTime<nextTime){ requestAnimationFrame(animate); return;} dimana jika currentTime < nextTime maka lakukan proses requestAnimationFrame(animate); dan return;. Setalah proses ini kita sediakan tag nextTime=currentTime+duration; untuk update nilai nextTime. Terakhir kita tentukan ukuran lingkaran yang akan di tampilkan dengan ctx.beginPath(); dan ctx.arc(x,50,30,0,Math.PI*2); dimana pada ctx.arc untuk x akan kita ganti setiap terjadinya looping yang merupakan bagian dari interval lingkaran. Kemudian setiap lingkaran kita akan tampilkan dengan warna random dengan cara menambahkan code ctx.fillStyle = '#' + Math.floor (Math.random() * 16777215).toString(16); dan ctx.fill();. Dipenutup tambahkan x+=60; yang berguna untuk memberikan interval antar lingkaran yang di tampilkan dan requestAnimationFrame(animate); untuk looping animasi lainnya. Berikut ini hasil dari output program yang kita bahas.
61 Gambar 26. Output animasi interval lingkaran Referensi image : screenshot dari hasil program Begitulah tampilan program dari code sebelumnya, dimana nanti lingkaran akan muncul terus menerus hingga bagian kanan canvas dengan warna yang random. Percobaan berikutnya kita akan menampilkan persegi secara random atau tanpa interval dengan klik sebuah button yang telah disediakan. Nanti persegi ini akan muncul disekitaran canvas. Berikut code lengkap yang akan kita gunakan. <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid red; } </style> </head> <body> <p><button type="button" id="animasi" >Lihat Animasi</button><p>
62 <canvas id="canvas" width=400 height=400></canvas> </body> <script> const btndownload = document.querySelector("#animasi"); btndownload.addEventListener("click",function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; requestAnimationFrame(animate); function animate(currentTime) { var x=Math.random()*canvas.width; var y=Math.random()*canvas.height; ctx.fillRect(x,y,30,30); ctx.fillStyle='#'+Math.floor(Math.random()*16777215) .toString(16); requestAnimationFrame(animate); } }); </script> </html>
RkJQdWJsaXNoZXIy MTM3NDc5MQ==