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.
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.
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
Roy Purbo
