Membuat Animasi Multicolor Firework Menggunakan HTML Javascript
Selamat malam, kali ini saya akan membagigan Cara Membuat Animasi Multicolor Firework Menggunakan HTML Javascript
Copy Kenotepad lalu simpan dengan ekstensi .HTML, dan lihat hasilnya.
Oke sekian saja artikel singkat ini, semoga bermanfaat.
TAG : Membuat Multicolor Firework Munggunakan HTML dan Javascript,Multicolor Firework, HTML Animated, Animasi HTML, ANimasi Javascript, Animasi Multicolor Firework, Kembang Api
Berikut codenya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fireworks : ANAMPEDIA</title>
<style>
canvas{
width:100%;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
var t = 0;
var c = document.querySelector("canvas");
var $ = c.getContext('2d');
c.width = window.innerWidth;
c.height = window.innerHeight;
$.fillStyle = 'hsla(0,0%,0%,1)';
window.addEventListener('resize', function() {
c.width = window.innerWidth;
c.height = window.innerHeight;
}, false);
function draw() {
$.globalCompositeOperation = 'source-over';
$.fillStyle = 'hsla(0,0%,0%,.1)';
$.fillRect(0, 0, c.width, c.height);
var foo, i, j, r;
foo = Math.sin(t) * 2 * Math.PI;
for (i=0; i<400; ++i) {
r = 400 * Math.sin(i * foo);
$.globalCompositeOperation = '';
$.fillStyle = 'hsla(' + i + 12 + ',100%, 60%,1)';
$.beginPath();
$.arc(Math.sin(i) * r + (c.width / 2),
Math.cos(i) * r + (c.height / 2),
1.5, 0, Math.PI * 2);
$.fill();
}
t += 0.000005;
return t %= 2 * Math.PI;
};
function run() {
window.requestAnimationFrame(run);
draw();
}
run();
</script>
</body>
</html>Copy Kenotepad lalu simpan dengan ekstensi .HTML, dan lihat hasilnya.
Oke sekian saja artikel singkat ini, semoga bermanfaat.
TAG : Membuat Multicolor Firework Munggunakan HTML dan Javascript,Multicolor Firework, HTML Animated, Animasi HTML, ANimasi Javascript, Animasi Multicolor Firework, Kembang Api
