jindutiao

最新推荐文章于 2024-08-01 14:30:43 发布

我有一只哈士奇

最新推荐文章于 2024-08-01 14:30:43 发布

阅读量197

点赞数

文章标签： stylesheet canvas

本文链接：https://blog.csdn.net/qq_34533234/article/details/78073863

版权

<!DOCTYPE html>
<html>

    <head>

        <meta charset="UTF-8">

        <title>Canvas + requestAnimationFrame</title>


        <script src="/static/js/canvas.js"></script>

        <link rel="stylesheet" href="/static/css/canvas.css" type="text/css" />

    </head>

    <body>

        <audio src="/static/music/Momoko%20-%20禁绝边境线【日翻】（Cover%20ワルキューレ）.mp3" autoplay="autoplay"></audio>

        <canvas></canvas>

    </body>

</html>

body{

  margin: 0px;

  padding: 0px;

  background: black;
}

canvas{

  position: absolute;

  top: 50px;

  left:200px;

}

onload = function() {

    var canvas = document.getElementsByTagName("canvas")[0];

    var ctx = canvas.getContext("2d");

    var particles = [];

    var w = 1000;

    var h = 400;

    canvas.width = w ;

    canvas.height = h;

    function progressbar() {

        this.widths = 0;

        this.hue = 0;

        this.draw = function() {

            ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 50%, 1)';

//          ctx.fillStyle = 'white';

            ctx.fillRect(0, 80, this.widths, 25);

        }
    }

    function particle() {

        this.x =  bar.widths - 1;

        this.y = 82;

        this.g = 1 + Math.random() * 3;

        this.down = false;

        this.draw = function() {

            ctx.fillStyle = 'hsla(' + (bar.hue) + ', 100%, 40%, 1)';

            var size = Math.random() * 5;

            ctx.fillRect(this.x, this.y, size, size);

        }
    }


    function reset() {

        ctx.fillStyle = 'black';

//      ctx.fillRect(0, 0, w, h);

        ctx.clearRect(0, 0, w, h);

    }


    function draw() {

        reset();

        bar.hue += 1;

        bar.widths += 2;

        if(bar.widths > 1000) {

                reset();

                bar.hue = 0;

                bar.widths = 0;

                particles = [];


        } else {

            bar.draw();

                particles.push(new particle());

        }

        update();
    }

    function update() {

        for(var i = 0; i < particles.length; i++) {

            var p = particles[i];

            if(p.down == true) {

                p.g += 0.1;

                p.y += p.g;


            } else {

                if(p.g > 0) {

                    p.y -= p.g;

                    p.g -= 0.1;

                } else {

                    p.down = true;

                    p.g += 0.1;

                    p.y += p.g;

                }
            }

            p.draw();
        }
    }

    function animloop() {

        draw();

        requestAnimationFrame(animloop);
    }

//  http://web.jobbole.com/91017/

    bar = new progressbar();

    animloop();

}