Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball Berbagai Warna
Labkom99.com - Pada kesempatan kali ini kita coba Belajar HTML5 dan Canvas Memembuat Efek Animasi Hue Ball Berbagai Warna. Dengan menggunakan Tag Canvas, JS dan HTML5 sehingga efek animasi tersebut dapat di buka di browser atau dapat pula digunakan untuk mempercantik tampilan website anda. Untuk membuat efek animasi hue ball berbagai warna dapat kita lihat panduan ini.

Alat / Bahan Baku

Notepad 
Bisa menggunakan Tols web programming Lain untuk pemrograman 

Perhatian 

Untuk membuat layout pada bagian ini sabaiknya memahami terlebih dahulu tentang Struktur dasar HTML dan cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas  pada pembahasan Bagaimana Cara Membuat Template HTML 

Metode / Langkah

Penggunaan html 5 dan Canvas disarankan untuk menggunakan Firefox, Google, opera, dan browser lain yang mendukung HTML 5 untuk menjalakan program.

Pembaca yang tertarik pada lebih banyak konten yang berhubungan dengan HTML5, Canvas JavaScript dapat melihat topik di situs ini sepeti :


Artikel ini menjelaskan contoh berbasis CanvasJS dan HTML5 untuk mencapai tab Effects rona bola. Untuk berbagi dengan Anda dan referensi Anda, detailnya adalah sebagai berikut: 
Tangkapan layar efek yang berjalan adalah sebagai berikut:

Source Code lengkapnya adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Labkom99.com - Canvas dan HTML5</title>
</head>
<body>
<canvas></canvas>
<script type="text/javascript">
var canvas,ctx,max,p,count;
window.onload=function(){
 var a,b,r;
 canvas = document.getElementsByTagName('canvas')[0];
 ctx = canvas.getContext('2d');
 canvas.width=canvas.height=400;
 ctx.fillRect(0,0,400,400);
 max=80;
 count=150;
 p=[];
 r=0;
 for(a=0;a<max;a++){
  p.push([Math.cos(r),Math.sin(r),0]);
  r+=Math.PI*2/max;
 }
 for(a=0;a<max;a++)p.push([0,p[a][0],p[a][1]]);
 for(a=0;a<max;a++)p.push([p[a][1],0,p[a][0]]);
 rus();
};
function rus(){
 var a,b,c,d,e,s,tim,p2,xp,yp,xp2,yp2,x,y,z,x1,y1,z1;
 ctx.globalCompositeOperation = "source-over";
 ctx.fillStyle="rgba(0,0,0,0.03)";
 ctx.fillRect(0,0,canvas.width,canvas.height);
 ctx.globalCompositeOperation = "lighter";
 tim=count/5;
 for(e=0;e<3;e++){
  tim*=1.7;
  s=1-e/3;
  a=tim/59;
  yp=Math.cos(a);
  yp2=Math.sin(a);
  a=tim/23;
  xp=Math.cos(a);
  xp2=Math.sin(a);
  p2=[];
  for(a=0;a<p.length;a++){
   x=p[a][0];y=p[a][1];z=p[a][2];
   y1=y*yp+z*yp2;
   z1=y*yp2-z*yp;
   x1=x*xp+z1*xp2;
   z=x*xp2-z1*xp;
   z1=Math.pow(2,z*s);
   x=x1*z1;
   y=y1*z1;
   p2.push([x,y,z]);
  }
  s*=120;
  for(d=0;d<3;d++){
   for(a=0;a<max;a++){
    b=p2[d*max+a];
    c=p2[((a+1)%max)+d*max];
    ctx.beginPath();
    ctx.strokeStyle="hsla("+((a/max*360)|0)+",70%,60%,0.15)";
    ctx.lineWidth=Math.pow(6,b[2]);
    ctx.lineTo(b[0]*s+200,b[1]*s+200);
    ctx.lineTo(c[0]*s+200,c[1]*s+200);
    ctx.stroke();
   }
  }
 }
 count++;
 requestAnimationFrame(rus);
}
</script>
</body>
</html>

Komentar