Tampilkan postingan dengan label HTML5. Tampilkan semua postingan
Tampilkan postingan dengan label HTML5. Tampilkan semua postingan

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 :

HTML5 Canvas Fill and Gradient

Langkah2nya pembuatannya masih sama mulai dari mempersiapkan halaman HTML yang berisi tag canvas dalam <body></body> seperti tag berikut :

<canvas id="canvasku" width="300" height="300"></canvas>

See the Pen Canvas Basic (Fill & Gradient) by Agus Made (@agusmade) on CodePen.

Selanjutnya rujuk ke file JS atau tambahkan tag <script></script> yang berisi code 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.

Maka hasilnya akan menjadi seperti gambar di atas, atau hasil berikut :

See the Pen Canvas Basic (Fill & Gradient) by Agus Made (@agusmade) on CodePen.

Maaf saya masih males ngasi panduan bertele2 dalam kata2, karna dalam soure code sudah disertai ketarangan tidap bagiannya. Kalo ada yang belum jelas, atau salah, atau usul atau protes, silahkan tulis komen.
Moga pikiran yang baik senantiasa menyertai kita.
Makasih

Canvas dalam HTML5 bukanlah barang baru, namun kebanyakan dari web developer khususnya yang berkutat di HTML5 dan javascript jarang peduli sama hal ini. Mengapa demikian? karena udah banyak library2 javascript yang instan dan mudah digunakan untuk pengelolaan gambar.

Gak peduli apapun alasannya, tahu bagaimana cara ngurusi canvas di HTML5 lebih baik daripada gak tahu sama sekali. Karna sebagian besar library pengelolaan gambar dengan javascript menggunakan object dan fungsi dasar dalam HTML5 canvas.

Dalam Tutorial ini kita akan belajar membuat gambar2 sederhana pada canvas menggunakan fungsi2 bawaan pada canvas. Berikut kira2 penampilan hasil dari apa yang kita lakukan :

HTML5 Canvas Line and Curve

Langkah2nya pembuatannya adalah sebagai berikut :
Pertama siapkan halaman HTML yang berisi tag canvas dalam <body></body> seperti tag berikut :

<canvas id="canvasku" width="400" height="50"></canvas>

See the Pen Canvas Basic (Line & Curve) by Agus Made (@agusmade) on CodePen.

Selanjutnya rujuk ke file JS atau tambahkan tag

yang berisi sintaks berikut :

var canvas=document.getElementById('canvasku');
var context=canvas.getContext('2d');

/* GARIS (line) */
context.beginPath();
context.moveTo(0,10);
context.lineTo(200,100);
context.stroke();

context.beginPath();
context.moveTo(50,10);
context.lineTo(250,100);
//ukuran garis
context.lineWidth=10;
context.stroke();

context.beginPath();
context.moveTo(100,10);
context.lineTo(300,100);
context.lineWidth=10;
//warna garis
context.strokeStyle = '#ff0000';
context.stroke();

context.beginPath();
context.moveTo(150,10);
context.lineTo(350,100);
context.lineWidth=15;
context.strokeStyle = 'rgba(0,0,255,.5)';
//ujung garis
context.lineCap = 'round';
context.stroke();

/* BUSUR (arc) */
context.beginPath();
context.arc(10, 100, 50, 0, Math.PI/2, false); //x, y, radius, startAngle, endAngle, counterClockwise
context.lineWidth = 5;
context.lineCap = 'butt';
context.strokeStyle = 'green';
context.stroke();
circles([[10,100]]); //titik pusat

context.beginPath();
context.moveTo(10, 200)
context.arcTo(50, 200, 50, 180, 20); //x1, y1, x2, y2, radius
context.arcTo(50, 140,100, 190, 15);
context.lineWidth = 5;
context.lineCap = 'butt';
context.strokeStyle = 'purple';
context.stroke();
circles([[10,200],[50, 200],[50, 180],[50, 140],[100, 190]]); //titik pusat
lines([[10,200],[50, 200],[50, 180],[50, 140],[100, 190]]); //titik pusat

/* KURVA (curve) */
context.beginPath();
context.moveTo(80,110);
context.quadraticCurveTo(100,220,240,110);
context.lineWidth = 5;
context.lineCap = 'butt';
context.strokeStyle = 'blue';
context.stroke();
circles([[80,110],[100,220],[240,110]]); //titik bantu
lines([[80,110],[100,220],[240,110]]); //garis bantu

context.beginPath();
context.moveTo(140,200);
context.bezierCurveTo(240,260,390,110,240,120);
context.lineWidth = 5;
context.lineCap = 'butt';
context.strokeStyle = 'red';
context.stroke();
circles([[140,200],[240,260],[390,110],[240,120]]); //titik bantu
lines([[140,200],[240,260],[390,110],[240,120]]); //garis bantu

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 (Line & Curve) by Agus Made (@agusmade) on CodePen.

Maka hasilnya akan menjadi seperti gambar di atas, atau hasil berikut :

See the Pen Canvas Basic (Line & Curve) by Agus Made (@agusmade) on CodePen.

Maaf tidak banyak panduan dalam kata2, karna dalam soure code semua ada keterangannya. Kalo ada yang belum jelas, atau salah, atau usul atau protes, silahkan tulis komen.

Moga pikiran yang baik senantiasa menyertai kita.
Makasih

More

Label

3D (1) blogger (1) Canvas (2) cerita pribadi (4) cms (1) coreldraw (1) delphi (6) freeware (1) GLScene (1) gps (1) HTML5 (2) humor (1) library (1) mysql (4) OLE/DDE (1) online tools (2) oop (2) OpenGL (1) photoshop (2) php (1) PJU (2) project (4) referensi (1) software (9) tamzbackup (1) tutorial dasar (8) zeos (3)