Jumat, September 06, 2019

HTML Canvas dasar

Apakah yang dimaksud dengan Canvas pada HTML?
Elemen HTML Canvas digunakan untuk menggambar grafik menggunakan JavaScript. Elemen Canvas hanya merupakan sebuah container untuk kumpulan grafik. Dibutuhkan penggunaan JavaScript untuk dapat menggambar sebuah grafik. Canvas memiliki beberapa method untuk menggambar bentuk, persegi, lingkaran, teks, dan menambahkan gambar.

Contoh: Canvas dapat berupa area persegi panjang pada laman HTML. Secara default, sebuah canvas tidak memiliki border ataupun konten. Atribut id telah ditentukan untuk merujuknya di dalam sebuah script, serta penggunaan panjang dan lebar atribut digunakan untuk mendefinisikan ukuran dari canvas. Atribut style digunakan untuk penambahan border pada Canvas.

Input:
Output:
menggambar persegi panjang dengan menggunakan Canvas pada html
Gambar 1 persegi panjang Canvas

Berikut ini beberapa bentuk yang dapat digambar menggunakna Canvas:
satu, Menggambar sebuah lingkaran

Input:
Output:
menggambar lingkaran canvas pada html
Gambar 2 lingkaran Canvas

dua, Menggambar teks

Input:
Output:
menggambar teks dengan menggunakan canvas pada html
Gambar 3 menggambar teks Canvas

tiga, Menggambar gradien linier

Input:
Output:
menggambar gradien linier canvas pada html
Gambar 4 menggambar gradien linier Canvas

empat, Menggambar lukisan pada Canvas

Input:
Output:
menggambar lukisan dengan Canvas pada laman html
Gambar 5 lukisan Canvas

lima, Properti blur untuk menggambar bayangan canvas HTML

Input:
Output:
penggunaan properti blur pada Canvas untuk membuat gambar pada html
Gambar 6 properti blur pada Canvas

enam, Method rotasi pada HTML canvas

input:
Output:
melakukan rotasi gambar pada html dengan menggunakan Canvas
Gambar 7 rotasi gambar

tujuh, HTML Canvas translasi (perpindahan)
Method translate() melakukan pemetaan ulang posisi (0,0) pada canvas.

Input:
Output:
melakukan pemindahan posisi gambar atau translasi pada laman html dengan menggunakan canvas
Gambar 8 Translasi Canvas

delapan, Method transformasi pada canvas html

input:
Output:
melakukan transformasi gambar atau lukisan pada laman html dengan menggunakan Canvas
Gambar 9 transformasi Canvas

sembilan, Membuat animasi pada HTML canvas
JavaScript membantu mensimulasikan animasi terbaik pada Canvas HTML5.

Dua method penting pada JavaScript yang dapat digunakan untuk menganimasikan gambar pada canvas:
satu, setInterval(callback, time): Method ini secara berulang mengeksekusi runtutan kode yang diberikatan pada waktu tertentu.
dua, setTimeout(callback, time): Method ini mengeksekusi runtutan kode hanya sekali pada waktu tertentu.

Input:
Output:
Silahkan kunjungi link berikut ini untuk melihat hasil output dari kode program:





Related Posts

HTML Canvas dasar
Oleh

"semoga yang memberikan komentar diberikan berkah kebaikan dari Allah, dijauhkan dari kejahatan, dan diberikan pahala ilmu dan amal jariyah dari sepenggal kata yang ia tinggalkan amiin :) "