Pertemuan 10 Membuat Objek dengan Canvas HTML5

Pertemuan 10
Membuat Objek dengan Canvas HTML5

Web Statis
SKB112316
Oleh : Wahyu Widodo

Mengenal Canvas HTML 5

Kemampuan dasar

: HTML dan Javascript

Kegunaan :

 Membuat grafik & diagram

 Membuat user interface menarik

 Animasi sederhana

 Membuat Game

Mengenal Canvas HTML 5
Fitur :

 Tool : Rectange, Arc, Line, Bezier dan Kurva kuadratik

 Efek : Fill dan Strokes, Shadows, Linear dan gradien radial, Alpha

transparansi dan Komposisi

 Transformasi: Scaling, Rotasi, Translation, Transformasi matriks

Membuat Template Canvas

Canvas Text

Membuat warna gradient

Membuat Garis

Terdapat 3 method :

 moveTo(x,y); untuk mengatur posisi kursor gambar
 lineTo(x,y); untuk menarik garis

 stroke(); untuk memberi warna pada garis

Membuat Garis
Tambahkan berikut ini :
 c.lineWidth=15;

 c.strokeStyle="7Cfc00";

 c.lineCap="butt"; // (butt, round atau square)

Membuat Busur
Method :
arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);

Referensi :

 http://www.w3schools.com