Sebuah
web yang menggunakan pemrograman bahasa HTML 5, warna merupakan hal menarik
untuk ditampilkan baik yang terdapat pada objek maupun background. Apalagi
warna tersebut Kita buatkan animasinya yang menambahkan variasi. Untuk membuat
animasi warna diterapkan konsep warna RGB yang didalam ada nilai mulai dari 0
sampai dengan 255, dan membuat fungsi if – else untuk pergerakan objek.
Dibawah
ini adalah contoh langkah-langkah untuk membuat animasi warna dengan
menggunakan bentuk bulat atau bola adlah sebagai berikut:
1. Buka
program editor (notepad, notepad ++ atau dengan yang lain)
2. Tuliskan
script dibawah dalam aplikasi editor
<html>
<head>
<style>
canvas {
border-width: 1px;
border-style:
solid;
}
</style>
<script>
var
canvas;
var
ctx;
var
circleX = 70;
var
circleY = 70;
var
circleXModifier = 2;
var
circleYModifier = 2;
var
scale = 1.0;
var
r = 255;
var
g = 255;
var
b = 255;
window.onload = function(){
canvas =
document.getElementById("myCanvas");
ctx =
canvas.getContext("2d");
setInterval(draw,
1.6);
};
function
draw() {
r =
Math.round(Math.random() * 255);
g =
Math.round(Math.random() * 255);
b =
Math.round(Math.random() * 255);
ctx.fillStyle
= "#fff";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.arc(circleX,
circleY, 70, 0, 2 * Math.PI, false);
ctx.fillStyle =
"rgb("+r+","+g+","+b+")";
ctx.fill();
circleX
+= circleXModifier;
circleY
+= circleYModifier;
if
(circleX >= canvas.width-70)
circleXModifier
= -2;
else
if (circleX < 70)
circleXModifier
= 2;
if
(circleY >= canvas.height-70)
circleYModifier
= -2;
else
if (circleY < 70)
circleYModifier
= 2;
}
</script>
</head>
<body>
<center>
<canvas id="myCanvas"
width="640" height="480">
</canvas>
</center>
</body>
</html>
Keterangan:
Script yang berwarna merah , yaitu untuk melakukan
pembangkitan nilai rgb dari Math.random() range 0 sampai dengan 255
Script yang berwarna biru, hasil pembangkitan nilai
rgb Kita masukkan dalam style sehingga warna bola ( bentuk ) akan berubah
secara berulang-ulang atau terus menerus.
3. Simpan Script tadi dengan menggunakan extend atau
tipe file “.html”
4. Nah sekarang Bisa Kita coba dengan membuka file html
diatas. Dan hasilnya seperti gambar diatas.
0 komentar:
Post a Comment