Canvas pada HTML 5 cikal bakal game interaktif berbasis web

Share

HTML5_Logo_256Salah satu fitur baru yang ada pada HTML 5 adalah <canvas>.  Di HTML 5 <canvas> adalah element yang digunakan untuk menggambar grafik, object di website yang umumnya melalui script javascript. Elemen <canvas> hanyalah wadah atau media untuk menggambar saja, sedangkan untuk menggambarnya sendiri kita harus menggunakan script misalnya javascript. Untuk menggambar grafik, <canvas> menyediakan metode misalnya untuk menggambar garis, kotak lingkaran, karakter dan menambahkan gambar.

Membuat Canvas :

Media canvas berbentuk persegi yang secara default memiliki border dan isi.

Contoh canvas :
[sourcecode language="html"]
style="border:1px solid #000000;">

[/sourcecode]

Menggambar canvas dengan javascript :

[sourcecode language="html"]



Browser Anda tidak mendukung tag kanvas HTML5.



[/sourcecode]
Koordinat Canvas

Kanvas adalah grid dua dimensi.

Sudut kiri atas kanvas memiliki koordinat (0,0)

Jadi, fillRect () metode di atas memiliki parameter (0,0,150,75).

Ini berarti: Mulai di pojok kiri atas (0,0) dan menggambar piksel persegi panjang 150×75.

Canvas – Path
Untuk menggambar garis lurus di atas kanvas, kita akan menggunakan dua metode berikut:

moveTo (x, y) mendefinisikan titik awal baris
lineto (x, y) mendefinisikan titik akhir baris
Untuk benar-benar menarik garis, kita harus menggunakan salah satu dari methtod tinta (ink), seperti stroke ().

Tentukan titik awal dalam posisi (0,0), dan titik akhir pada posisi (200.100). Kemudian gunakan stroke () metode untuk menarik garis:

contoh :

[sourcecode language="html"]




Browser Anda tidak mendukung tag kanvas HTML5.


[/sourcecode]

Menggambar lingkaran pada canvas

Menggambar lingkaran pada kanvas menggunakan method arc();

contoh :
[sourcecode language="html"]



Browser Anda tidak mendukung tag kanvas HTML5.



[/sourcecode]
Canvas – Text

Untuk menggambar teks pada kanvas, properti  dan metode yang paling penting adalah:

Font – mendefinisikan properti font untuk teks
fillText (teks, x, y) – Mengisi teks pada kanvas
strokeText (teks, x, y) – Meletakkan teks pada kanvas (tidak mengisi)
Menggunakan fillText ():

contoh :
[sourcecode language="html"]



Browser Anda tidak mendukung tag kanvas HTML5.



[/sourcecode]
Menggunakan strokeText():
[sourcecode language="html"]



Browser Anda tidak mendukung tag kanvas HTML5.



[/sourcecode]

Canvas – Gradients

Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dll Bentuk pada kanvas tidak terbatas pada warna solid.

Ada dua jenis gradien:

createLinearGradient (x, y, x1, y1) – Menciptakan gradien linier
createRadialGradient (x, y, r, x1, y1, r1) – Membuat gradien radial / melingkar
Setelah kita memiliki objek gradien, kita harus menambahkan dua atau lebih warna.

Method addColorStop () digunakan untuk menentukan berhentinya warna, dan posisinya di sepanjang gradien. Posisi gradien dapat di mana saja antara 0 sampai dengan 1.

Untuk menggunakan gradien, mengatur fillStyle atau strokeStyle properti untuk gradien, dan kemudian menggambar bentuk, seperti persegi panjang, teks, atau garis.

Menggunakan createLinearGradient ():

contoh :
[sourcecode language="html"]



Browser Anda tidak mendukung tag kanvas HTML5.



[/sourcecode]
Menggunakan createRadialGradient()

contoh :
[sourcecode language="html"]



Browser Anda tidak mendukung tag kanvas HTML5.



[/sourcecode]

Canvas – Images

Untuk menggambar sebuah gambar pada kanvas, kami akan menggunakan metode berikut:

drawImage (gambar, x, y)

contoh :
[sourcecode language="html"]


Image to use:

The Scream

Canvas:


Browser Anda tidak mendukung tag kanvas HTML5.



[/sourcecode]

Dengan adanya canvas sangat membantu dalam pembuatan game berbasis web.

–dfr–

Selamat mencoba – semoga bermanfaat

dan metode

Loading Facebook Comments ...

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Translate »