Sebagai lanjutan dari tulisan sebelumnya masih mengenai Canvas dalam HTML5, berikut kita membahas mengenai Fill dan Gradasi (Gradient). Tentu kita hanya menggunakan fungsi2 bawaan HTML5 untuk mengelola canvas. Hasil akhir dari pelajaran kita hari ini kira2 seperti gambar berikut :
Langkah2nya pembuatannya masih sama mulai dari mempersiapkan halaman HTML yang berisi tag canvas dalam <body></body> seperti tag berikut :
var canvas=document.getElementById('canvasku');
var context=canvas.getContext('2d');
/* SOLID */
//kotak 1
context.beginPath();
context.rect(10, 10, 80, 40);
context.fillStyle = 'lime';
context.fill();
//kotak 2
context.beginPath();
context.rect(100, 10, 80, 40);
context.strokeStyle = 'green';
context.stroke();
//kotak 3
context.beginPath();
context.rect(190, 10, 80, 40);
context.fillStyle = 'lime';
context.strokeStyle = 'green';
context.fill();
context.stroke();
/* LINEAR GRADIENT */
//kotak 4
context.beginPath();
var grdf = context.createLinearGradient(10, 3, 10+80, 3); //x1,y1,x2,y2
grdf.addColorStop(0, '#234');
grdf.addColorStop(1, '#23e');
context.rect(10, 60, 80, 40);
context.fillStyle = grdf;
context.fill();
//kotak 5
context.beginPath();
var grdl = context.createLinearGradient(3, 60, 3, 100);
grdl.addColorStop(0, '#865');
grdl.addColorStop(1, '#f65');
context.rect(100, 60, 80, 40);
context.strokeStyle = grdl;
context.stroke();
//kotak 6
context.beginPath();
var grdl = context.createLinearGradient(3, 60, 3, 100);
grdl.addColorStop(0, '#865');
grdl.addColorStop(1, '#f65');
var grdf = context.createLinearGradient(190, 3, 190+80, 3);
grdf.addColorStop(0, '#234');
grdf.addColorStop(1, '#23e');
context.rect(190, 60, 80, 40);
context.fillStyle = grdf;
context.fill();
context.strokeStyle = grdl;
context.lineWidth = 5;
context.stroke();
//garis bantu
circles([[3, 60],[3, 100]]);
lines([[3, 60],[3, 100]],grdl);
circles([[190, 3],[190+80, 3]]);
lines([[190, 3],[190+80, 3]],grdf);
/* RADIAL GRADIENT */
//lingkaran 1
context.beginPath();
var grdf = context.createRadialGradient(40, 140, 0, 40, 140, 30); //circle1x,circle1y,circle1radius,circle2x,circle2y,circle2radius,
grdf.addColorStop(0, '#234');
grdf.addColorStop(1, '#23e');
context.arc(40, 140, 30, 0, 2 * Math.PI, false); //lingkaran
context.fillStyle = grdf;
context.fill();
//lingkaran 2
context.beginPath();
var grdf = context.createRadialGradient(110, 140, 20, 110, 140, 30);
grdf.addColorStop(0, '#234');
grdf.addColorStop(1, '#23e');
context.arc(110, 140, 30, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();
//lingkaran 3
context.beginPath();
var grdf = context.createRadialGradient(180, 140, 0, 180, 140, 50);
grdf.addColorStop(0, '#234');
grdf.addColorStop(1, '#23e');
context.arc(180, 140, 30, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();
//lingkaran 4
context.beginPath();
var grdf = context.createRadialGradient(250, 110, 0, 250, 140, 30);
grdf.addColorStop(0, '#234');
grdf.addColorStop(1, '#23e');
context.arc(250, 140, 30, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();
/* KOMBINASI */
//lingkaran besar
context.beginPath();
var grdlin = context.createLinearGradient(0, 235-65, 0, 235+65);
grdlin.addColorStop(0, '#23e');
grdlin.addColorStop(1, '#234');
context.arc(145, 235, 65, 0, 2 * Math.PI, false);
context.fillStyle = grdlin;
context.fill();
context.beginPath();
var grdf = context.createRadialGradient(145+20, 235+80, 0, 145+20, 235+80, 130);
grdf.addColorStop(0, 'rgba(255,255,255,0.7)');
grdf.addColorStop(1, 'rgba(255,255,255,0)');
context.arc(145, 235, 65, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();
context.beginPath();
var grdf = context.createRadialGradient(145-10, 235-40, 0, 145-10, 235-40, 90);
grdf.addColorStop(0, 'rgba(255,255,255,0.9)');
grdf.addColorStop(1, 'rgba(255,255,255,0)');
context.arc(145, 235, 65, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();
/* fungsi tambahan */
function circles(a,color){
color=color||'rgba(0,0,0,0.5)';
for (var i=0; i<a.length; i++ ){
context.beginPath();
context.arc(a[i][0], a[i][1], 3, 0, 2 * Math.PI, false);
context.fillStyle = color;
context.fill();
}
}
function lines(a,color){
color=color||'rgba(0,0,0,0.5)';
context.beginPath();
context.moveTo(a[0][0],a[0][1]);
for (var i=1; i<a.length; i++ ){
context.lineTo(a[i][0],a[i][1]);
}
context.lineWidth = 1;
context.strokeStyle = color;
context.stroke();
}
See the Pen Canvas Basic (Fill & Gradient) by Agus Made (@agusmade) on CodePen.
