北极的夜空

来源：互联网发布：六盘水金蝶软件编辑：程序博客网时间：2024/06/09 23:29
<!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 onload="aurora()">        <canvas id="sky"></canvas>    </body></html>
1 0