<!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>
参考效果图：http://codepen.io/amIwho/pen/pKHrs
北极的夜空
时间： 2024-08-30 08:12:58