Canvas HTML5: Contoh Membuat Bidang 2 Dimensi Pada Canvas HTML5

Beberapa contoh berikut adalah penjelasan bagaimana membuat bidang 2 dimensi berupa kotak, lingkaran, poligon. Contoh-contoh tersebut merupakan teknik dasar dalam membuat grafik.

Kotak

rec
Untuk membuat sebuah kotak, kita hanya membutuhkan method rect(x,y,width,height);, perhatikan demo berikut untuk menampilkan garis pinggir kotak maka diperlukan stroke():

Show/Hide Editor

<!DOCTYPE HTML> <html> <head> </head> <body> <canvas id="contoh"></canvas> <script> var garis = document.getElementById('contoh').getContext('2d'); garis.strokeStyle="red"; garis.rect(10,10,100,100); garis.stroke(); </script> </body> </html>
strokeRect
method rect dan stroke bisa digantikan dengan sebuah method strokeRect(x,y,width,height); perhatikan contoh berikut:

Show/Hide Editor

<!DOCTYPE HTML> <html> <head> </head> <body> <canvas id="contoh" ></canvas> <script> var garis = document.getElementById('contoh').getContext('2d'); garis.strokeStyle="red"; garis.strokeRect(10,10,100,100); </script> </body> </html>
fillRect
Selain rect bisa pula menggunakan method fillRect(x,y,width,height); dengan default warna nya adalah hitam. Untuk mengisi warna ditambahkan property fillStyle

Show/Hide Editor

<!DOCTYPE HTML> <html> <head> </head> <body> <canvas id="contoh" ></canvas> <script> var garis = document.getElementById('contoh').getContext('2d'); // kotak dengan warna default garis.fillRect(10,10,100,100); // kotak dengan warna merah garis.fillStyle="red"; garis.fillRect(120,10,100,100); </script> </body> </html>

Lingkaran

Untuk membuat lingkaran maka gunakan methode arc(x,y,r[integer],sudutawal,sudutakhir[float],arahjarumjam[boolean]);, x dan y adalah posisi pusat lingkaran, r adalah radius atau jari-jari lingkaran, sudutawal adalah sudut awal pembuatan arc dalam satuan radian dan sudutakhir adalah sudut terakhir pembuatan arc dalam satuan radian, sedangkan arahjarumjam bernilai true jika pembuatan arc searah jarum jam dan false berlawanan arah jarum jam. Jika hendak membuat sebuah lingkaran penuh maka sudutakhir-sudutawal=2pi

Show/Hide Editor

Poligon

Untuk membentuk poligon yang dibutuhkan adalah method beginPath(), moveTo, lineTo dan diakhiri dengan closePath() dan stroke. closePath() adalah fungsi untuk menutup poligon dan menandakan bahwa titik terakir akan dihubungkan dengan titik pertama. Perhatikan contoh berikut:

Show/Hide Editor

Canvas HTML5

Laman

Kamis, 17 April 2014

Contoh Membuat Bidang 2 Dimensi Pada Canvas HTML5

Kotak

Lingkaran

Poligon

Tidak ada komentar:

Posting Komentar