星星閃爍+多邊形移動 canvas

時間 2019-12-02
標籤星星閃爍多邊形移動 canvas 欄目無線简体版
原文原文鏈接
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #canvas {
                position: fixed;
                z-index: -1;
                top: 0;
                height: 100%;
                width: 100%;
                background: radial-gradient(#374566, #010203);
            }
        </style>
    </head>

    <body>

        <canvas id="canvas"></canvas>

        <script type="text/javascript">
            // CANVAS
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var cw = canvas.width = window.innerWidth,
                cx = cw / 2;
            var ch = canvas.height = window.innerHeight,
                cy = ch / 2;

            var requestId = null;

            var colors = ["#93DFB8", "#FFC8BA", "#E3AAD6", "#B5D8EB", "#FFBDD8"];

            function Particle() {
                this.x = Math.random() * cw;
                this.y = Math.random() * ch;
                this.r = 15 + ~~(Math.random() * 20); //radius of the circumcircle
                this.minR = 2 + ~~(Math.random() * 2) ;
                this.maxR = 6 + ~~(Math.random() * 2) ;
                this.l = 3 + ~~(Math.random() * 2); //polygon sides
                this.a = 2 * Math.PI / this.l;      // angle between polygon vertices
                this.rot = Math.random() * Math.PI; // polygon rotation
                this.speed = .05 + Math.random() / 2;
                this.rotSpeed = 0.005 + Math.random() * .005;
                this.color = colors[~~(Math.random() * colors.length)];
            }
            Particle.prototype.update = function() {
                if(this.y < -this.r) {
                    this.y = ch + this.r;
                    this.x = Math.random() * cw;
                }
                this.y -= this.speed;
            }
            Particle.prototype.draw = function() {
                ctx.save();      //多邊形
                ctx.translate(this.x, this.y);
                ctx.rotate(this.rot);                
                ctx.beginPath();
                for(var i = 0; i < this.l; i++) {
                    var x = this.r * Math.cos(this.a * i);
                    
                    var y = this.r * Math.sin(this.a * i);
                    ctx.lineTo(x, y);
                }
                ctx.closePath();
                ctx.lineWidth = 4;
                ctx.strokeStyle = this.color;
                ctx.stroke();
                ctx.restore();
                
                ctx.save();       //星星
                ctx.beginPath();
                ctx.translate(this.x / 1.1, this.y / 2);
                ctx.rotate(this.rot);    
                ctx.globalAlpha = light;
                for(var i = 0; i < 5; i ++){
                    var x = 5;                   
                    var y = 5;
                    ctx.lineTo( Math.cos( (18 + i*72 )/180 * Math.PI) * this.maxR + x,
                                -Math.sin( (18 + i*72 )/180 * Math.PI) * this.maxR + y)
                    ctx.lineTo( Math.cos( (54 + i*72 )/180 * Math.PI) * this.minR + x,
                                -Math.sin( (54 + i*72 )/180 * Math.PI) * this.minR + y)
                }
                ctx.closePath();
                ctx.lineWidth = 1;
                ctx.fillStyle = "#fbd94e";
                ctx.strokeStyle = "#fbd94e";
                ctx.lineJoin = "round";
                ctx.fill();
                ctx.stroke();
                ctx.restore();
            }

            

            var particles = [];
            for(var i = 0; i < 20; i++) {
                var p = new Particle();
                particles.push(p)
            }

            function Draw() {
                requestId = window.requestAnimationFrame(Draw);
                //ctx.globalAlpha=0.65;
                ctx.clearRect(0, 0, cw, ch);
                particles.map((p) => {
                    p.rot += p.rotSpeed;
                    p.update();
                    p.draw();
                })

            }

            function Init() {
                if(requestId) {
                    window.cancelAnimationFrame(requestId);
                    requestId = null;
                }

                cw = canvas.width = window.innerWidth, cx = cw / 2;
                ch = canvas.height = window.innerHeight, cy = ch / 2;

                //particles.map((p) => p.update());
                Draw();
            };

            setTimeout(function() {
                Init();
                window.addEventListener('resize', Init, false);
            }, 15);
            
            var light = 1;    //透明度
            setInterval(function(){
                if(light == 1){
                    light = .5;
                }else{
                    light = 1;
                }
            },350)
        </script>
    </body>

</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。