Saturday, March 4, 2017

Membuat Animasi Multicolor Firework Menggunakan HTML Javascript

Penulis Unknown Diterbitkan 9:02 AM

Tags

HTML

Javascript

Tutorial

Selamat malam, kali ini saya akan membagigan Cara Membuat Animasi Multicolor Firework Menggunakan HTML Javascript

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