Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball Berbagai Warna

by -4 views
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.


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

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>

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.

About Author: labkom99

Gravatar Image
Labkom99 merupakan salah satu situs yang diperuntukkan menambah pengetahuan gratis tentang pemrograman, Akun Sosial, Google Update, Pembaruan Windows, Mac dan Banyak Lagi !!!