Tutorial Canvas Pada HTML5

Pada tutorial kali ini kita akan mempelajari tentang tutorial canvas pada HTML5, yang dimana fitur Canvas ini adalah fitur baru pada versi HTML5 saat ini.

Canvas adalah media yang digunakan dalam pembuatan lukisan. Salah satu tokoh yang pernah menggunakan metode pelukisan dengan minyak ini adalah seorang keturunan dari Prancis yang bernama Madonna pada tahun 1440. Seni lukis Canvas biasanya dibentangkan pada sebuah bingkai kayu. Di bawah ini adalah contoh gambar pelukisan dengan Canvas.

tutorial canvas pada html5

Dalam Kanvas pada HTML5, anda dapat menggambar berbagai macam seni grafis, mulai dari garis – garis sederhana ke objek grafis yang lebih kompleks. Elemen yang digunakan untuk membuat gambar Canvas ini adalah <canvas>.

Proses pembuatan Canvas pada HTML memiliki beberapa metode dalam penggambarannya, seperti penggambaran path (garis), boxes (kotak), circles (lingkaran), text (teks), dan gambar grafis.

Di bawah ini adalah beberapa contoh dari penerapan elemen Canvas :

Simple Canvas

Dan gambar di bawah ini adalah outputnya :

apa itu canvas pada html5

Menggambar Canvas Dengan Javascript

Output :

canvas pada html5

Menggambar Garis

Output :

canvas html5

Membuat Lingkaran

Output :

cara menggunakan canvas pada html5

Menggambar Sebuah Teks

Output :

cara menggunakan canvas pada html5

Membuat Teks Stroke

Output :

menggambar canvas pada halaman web

Menggambar Gradient

Output :

memasukan canvas ke dalam website

Menggambar Gradient Circular

Output :

canvas

Leave a comment

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

One thought on “Tutorial Canvas Pada HTML5”

× Contact Us