Cara Membuat Efect Screen Saver Dengan HTML 5

Cara Membuat Efect Screen Saver Dengan HTML 5 - HTML 5 sedang booming rata-rata semuanya juga sudah mendukung teknologi ini. Agar di blog ini tidak ketinggalan, maka saya juga akan membuat tutorial dengan menggunakan HTML 5.

Tutorial html5, tips html5, belajar html5

Dalam tutorial ini kita akan menggunakan canvas. Bagi yang tidak tahu canvas, saya akan jelaskan sedikit tentang canvas.

Apa sich elemen <canvas> itu ?

Canvas Mewakili grafik sederhana atau diagram, user interface yang menarik, animasi sederhana, grafik dan gambar grafik. Dan fitur yang disempurnakan dari keterbatasan CSS.

Fitur apa saja yang ada di elemen <canvas> ?

- Alat bantu menggambar : Rectangles, Arc, Jalan dan menggambar Line, Bezier dan Kurva Kuadratik.

- Efek: Fill dan Strokes, Shadows, Linear, gradien radial, Alpha transparansi dan Komposisi.

- Transformasi : Scaling, Rotasi, Translation, Transformasi matriks.

- Data dalam dan keluar : Membuka gambar eksternal oleh link atau URL, URI data atau kanvas lain, mengambil sebuah representasi PNG sebuah kanvas sebagai data URL.

Bagaimana ? sudah paham tentang canvas ???

Jika sudah paham kita lanjut ke tutorial cara pembuatan Efect Screen Saver menggunakan HTML5.

Langkah pertama buat file html nya dan ikuti source code dibawah ini ::

 
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" src="efect.js"></script>
</head>

<body>
<canvas id="canvas"></canvas>
</body>
</html>

file HTML nya singkat sajakan ??? karena yang kita perlukan cuman elemen canvasnya saja.

Kemudian kita buat file CSS dan ikuti source code dibawah ini :

 
* { margin: 0; padding: 0;}
#canvas {
 display: block;
 /*Fill canvas with black by default*/
 background: #000;
}

File CSSnya juga simple sekali karena hanya untuk mewarnai backgroung saja.

Dan yang ketiga kita harus buat file javascript dan ikuti source code dibawah ini :

 
window.onload = function(){
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 //Lets make the canvas occupy the full page
 var W = window.innerWidth, H = window.innerHeight;
 canvas.width = W;
 canvas.height = H;
 
 //Lets make some particles
 var particles = [];
 for(var i = 0; i < 25; i++)
 {
  particles.push(new particle());
 }
 
 function particle()
 {
  //location on the canvas
  this.location = {x: Math.random()*W, y: Math.random()*H};
  //radius - lets make this 0
  this.radius = 0;
  //speed
  this.speed = 3;
  //steering angle in degrees range = 0 to 360
  this.angle = Math.random()*360;
  //colors
  var r = Math.round(Math.random()*255);
  var g = Math.round(Math.random()*255);
  var b = Math.round(Math.random()*255);
  var a = Math.random();
  this.rgba = "rgba("+r+", "+g+", "+b+", "+a+")";
 }
 
 //Lets draw the particles
 function draw()
 {
  //re-paint the BG
  //Lets fill the canvas black
  //reduce opacity of bg fill.
  //blending time
  ctx.globalCompositeOperation = "source-over";
  ctx.fillStyle = "rgba(0, 0, 0, 0.02)";
  ctx.fillRect(0, 0, W, H);
  ctx.globalCompositeOperation = "lighter";
  
  for(var i = 0; i < particles.length; i++)
  {
   var p = particles[i];
   ctx.fillStyle = "white";
   ctx.fillRect(p.location.x, p.location.y, p.radius, p.radius);
   
   //Lets move the particles
   //So we basically created a set of particles moving in random direction
   //at the same speed
   //Time to add ribbon effect
   for(var n = 0; n < particles.length; n++)
   {
    var p2 = particles[n];
    //calculating distance of particle with all other particles
    var yd = p2.location.y - p.location.y;
    var xd = p2.location.x - p.location.x;
    var distance = Math.sqrt(xd*xd + yd*yd);
    //draw a line between both particles if they are in 200px range
    if(distance < 200)
    {
     ctx.beginPath();
     ctx.lineWidth = 1;
     ctx.moveTo(p.location.x, p.location.y);
     ctx.lineTo(p2.location.x, p2.location.y);
     ctx.strokeStyle = p.rgba;
     ctx.stroke();
     //The ribbons appear now.
    }
   }
   
   //We are using simple vectors here
   //New x = old x + speed * cos(angle)
   p.location.x = p.location.x + p.speed*Math.cos(p.angle*Math.PI/180);
   //New y = old y + speed * sin(angle)
   p.location.y = p.location.y + p.speed*Math.sin(p.angle*Math.PI/180);
   //You can read about vectors here:
   //http://physics.about.com/od/mathematics/a/VectorMath.htm
   
   if(p.location.x < 0) p.location.x = W;
   if(p.location.x > W) p.location.x = 0;
   if(p.location.y < 0) p.location.y = H;
   if(p.location.y > H) p.location.y = 0;
  }
 }
 
 setInterval(draw, 30);
}

Selesai.

untuk priviewnya tidak bisa saya tampilkan karena hasilnya bergerak. Tidak puas kalau cuman melihat imagenya saja ^__^. Jadi kalian bisa mencobanya sendiri ya.

Dan semoga artikel ini bermanfaat buat kalian semua.

Salam Hangat