buku multimedia untuk pembelajaran

1. HTML5 Canvas API: Path dan
Teks (1)
Disusun oleh Gottfried Prasetyadi
Universitas Gunadarma
ATA 2020/2021

2. HTML5 Canvas
• HTML5 Canvas adalah elemen yang menyediakan ruang kerja
(workspace) untuk menggambar dengan ukuran yang diinginkan
pengguna
• Canvas API berisi serangkaian fungsi menggambar yang dapat diakses
melalui JavaScript. Elemen kanvas dapat diberi gaya (style)
menggunakan CSS (Cascaded Style Sheet). Penggunaan CSS dapat
meningkatkan kinerja dan menambahkan efek yang menarik
• Dengan demikian, pemrograman HTML5 Canvas dapat dilakukan
dengan dukungan JavaScript dan CSS.

3. Mengapa HTML5 Canvas?
• HTML5 Canvas sepenuhnya interaktif; setiap obyek yang digambar di Canvas bisa
dianimasikan
• Canvas cukup fleksibel untuk memungkinkan pembuat konten menggambar
grafik yang dinamis. Juga memungkinkan penambahan audio dan video
• Semua browser utama mendukung kanvas
• Memiliki standardisasi
• Portabel. Setelah dibuat, aplikasi Canvas dapat berjalan hampir semua perangkat
• Untuk mengembangkan program Canvas, kita hanya memerlukan editor kode dan
browser
• HTML5 Canvas dapat digunakan untuk bermain game, menayangkan iklan,
representasi data, pendidikan, dan lain-lain

4. Live Server: Ekstensi Visual Studio Code
• Server development lokal dengan fitur live reload untuk laman statis
dan dinamis
• Link:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.Li
veServer

5. Materi yang akan dipelajari
• Garis
• Kurva/busur
• Menggabungkan garis

6. Garis

7. Garis Vertikal, Horizontal, dan Assorted

8. Menggabungkan Garis

9. Membuat Busur (1)

10. Membuat Busur (2)

11. Menggambar Kurva Kuadratik

12. Menggambar Pelangi

13. Tugas Minggu Kedua
• Ikuti instruksi yang tersedia pada file PDF/Word yang disertakan
bersama PPT ini
• Tugas dikirimkan ke email 3db03@prasetyadi.name
• Subyek email: Tugas 2 <npm> <nama mhs>
• Attachment email: file-file HTML dan screenshot fullscreen untuk
setiap case, menampilkan tanggal dan waktu di OS masing-masing
• 1 email mahasiswa berisi hasil tugas mahasiswa tersebut (tidak
diperkenankan mengirim tugas bersama-sama dalam 1 email, atau
mengirimkan hasil tugas orang lain)

14. Tugas Minggu Kedua
• Tenggat waktu: Selasa, 23 Maret 2021, pukul 23:59 WIB
• Semua metode Javascript yang ditemui bisa dicari di w3schools
• Contoh untuk beginPath():
• https://www.w3schools.com/tags/canvas_beginpath.asp
• Referensi lengkap: https://www.w3schools.com/tags/ref_canvas.asp
• (W3Schools juga menyediakan bahasa Indonesia)
• Kalian juga boleh menggunakan sumber lainnya