Canvas HTML5: Contoh bagaimana mewarnai objeck sederhana

Berikut di bawah ini adalah penjelasan bagaimana mengisi warna pada objeck sederhana. Dimulai dari satu warna sampai pembuatan gradient hanya menggunakan method dan property khusus untuk Canvas HTML5.

fill

Method fill() adalah fungsi yang memeritahkan untuk menisi object berupa lingkaran, persegi atau poligon. Method ini memerlukan sebuah property yang lain yaitu fillStyle yang bernilai warna. Berbeda dengan property strokeStyle yang berfungsi untuk mewarna stroke atau garis.

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.fillStyle="blue"; garis.rect(10,10,100,100); garis.fill(); garis.stroke(); </script> </body> </html>
createLinearGradient

Method createLinearGradient(x0,y0,x1,y1); digunakan untuk mengisi objeck dengan warna yang berubah secara linear, misal warna berubah dari biru menjadi merah secara linear. x0,y0,x1,y1 merupakan dua titik yang akan menentukan arah perubahan warna tersebut atau disebut gradien, dan panjang gradien s=((x1-x0)²+(y1-y0)²)^½ Bila dalam bentuk persamaan matematika gradien
m=(y1-y0)/(x1-x0) dan arah=arc tan(m)
Method ini tidak terlepas dengan method addColorStop(posisi,warna);, posisi bernilai 0 - 1 dan warna diisi dengan constant "red","blue" dan lain sebagainya. Misal addColorStop(0.4,"red"); berarti pada posisi 0.4 x s adalah berwarna merah. Perhatikan contoh berikut:

Show/Hide Editor

<!DOCTYPE HTML> <html> <head> </head> <body> <canvas id="contoh"></canvas> <script> var garis = document.getElementById('contoh').getContext('2d'); var gradien=garis.createLinearGradient(10,10,100,100); gradien.addColorStop(0.4,'red'); gradien.addColorStop(0.8,'blue'); gradien.addColorStop(1,'#00FFFF'); garis.fillStyle=gradien; garis.fillRect(10,10,100,100); </script> </body> </html>
createRadialGradient

Method createRadialGradient(x0,y0,r0,x1,y1,r1); dimana x0,y0 adalah posisi awal dan x1,y1 adalah posisi akhir, sama seperti LinearGradien, sedangkan r0 adalah jari-jari lingkaran pada titik pertama dan r1 adalah jari-jari lingkaran titik kedua. Untuk dapat mengimplementasikan method ini maka harus memenuhi syarat |r1-r0|>jarak titik pertama dan titik kedua. Misal jika x0=50, y0=50, r0=20, x1=90, y1=20, maka untuk menentukan nilai minimum r1 dihitung menggunakan jarak titik =40 dan r0 sehingga r1>60

Show/Hide Editor

<!DOCTYPE HTML> <html> <head> </head> <body> <canvas id="contoh"></canvas> <script> var garis = document.getElementById('contoh').getContext('2d'); var gradien=garis.createRadialGradient(50,50,20,90,50,61); gradien.addColorStop(0,'red'); gradien.addColorStop(1,'blue'); garis.fillStyle=gradien; garis.fillRect(10,10,200,400); </script> </body> </html>

Canvas HTML5

Laman

Jumat, 18 April 2014

Contoh bagaimana mewarnai objeck sederhana

fill

createLinearGradient

createRadialGradient

Tidak ada komentar:

Posting Komentar