Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball

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.

Daftar Isi hide

Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball Berbagai Warna

Alat / Bahan Baku Belajar HTML5 Dan Canvas

Perhatian

Metode / Langkah

Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball Berbagai Warna

Alat / Bahan Baku Belajar HTML5 Dan Canvas

Notepad Bisa menggunakan Tools web programming Lain untuk pemrograman

Perhatian

Untuk membuat efek animasi hue ball 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 Canvas, JS dan HTML5 untuk mencapai tab Effects rona bola. Untuk berbagi dengan Anda dan referensi Anda, detail Dan Untuk demonya bisa kalian lihat pada link berikut ini :

DEMO

<!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>

Kesimpulan :

Animasi ini dapat anda gunakan untuk mempercantik tampilan website anda. Atau bagi kalian yang hany mau coba coba belajar html, anda tinggal langsung aja copy paste kode diatas menggunakan notepad kalian. Kalian juga bisa mengubah rona warna susuai dengan warna kesukaan kalian. Semoga Bermanfaat.

Post Views: 284