首页 > 代码库 > 北极的夜空

北极的夜空

2024-07-14 02:04:06   224人阅读


<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body { width: 100%; height: 100% }
        </style>
        <script type="text/javascript">
            function aurora(){
                var canvas = document.getElementById( "sky" );
                var context = canvas.getContext( "2d" );
                canvas.style.width = "100%";
                canvas.style.height = "100%";
                canvas.width = canvas.offsetWidth;
                canvas.height = canvas.offsetHeight;
                function ClassLight(){
                    this.position = { 'x': Math.random() * canvas.width,
                        'y': Math.random() * canvas.height };
                    this.speed = 2;
                    this.angle = Math.random() * 360;
                    this.size = 0;
                    var r = Math.round( Math.random() * 255 );
                    var g = Math.round( Math.random() * 255 );
                    var b = Math.round( Math.random() * 255 );
                    var a = Math.random() * 0.2;
                    this.rgba = "rgba("+ r +", "+ g +","+ b +", " + a + ")";
                }

                var lights = [];
                for( var i = 1; i <= 70; ++i ){
                    lights.push( new ClassLight() );
                }
                function drawLight(){
                    context.globalCompositeOperation = "source-over";
                    context.fillStyle = "rgba(1, 1, 1, 0.05)";
                    context.fillRect( 0, 0, canvas.width, canvas.height );
                    context.globalCompositeOperation = "lighter";
                    for( var i = 0; i < lights.length; ++i ){
                        var light = lights[i];
                        context.fillStyle = "white";
                        context.fillRect( light.position.x, light.position.y,
                                light.size, light.size );

                        for( var j = 0; j < lights.length; ++j ){
                            var light1 = lights[j];
                            var dx = light1.position.x - light.position.x;
                            var dy = light1.position.y - light.position.y;
                            var dist = Math.sqrt( dx * dx + dy * dy );
                            if( dist < 300 ){
                                context.beginPath();
                                context.moveTo( light1.position.x, light1.position.y );
                                context.lineTo( light.position.x, light.position.y );
                                context.strokeStyle = light1.rgba;
                                context.stroke();
                                context.closePath();
                            }
                        }

                        light.position.x += Math.cos( light.angle * Math.PI / 180 ) * light.speed;
                        light.position.y += Math.sin( light.angle * Math.PI / 180 ) * light.speed;

                        if( light.position.x < 0 ) light.position.x = canvas.width + 50;
                        if( light.position.x > canvas.width + 50 ) light.position.x = 0;
                        if( light.position.y < 0 ) light.position.y = canvas.height + 50;
                        if( light.position.y > canvas.height + 50 ) light.position.y = 0;
                    }
                }
                setInterval( drawLight, 3 );
            }
        </script>
    </head>

    <body onl oad="aurora()">
        <canvas id="sky"></canvas>
    </body>
</html>

参考效果图：http://codepen.io/amIwho/pen/pKHrs


联系
我们