首页 > 代码库 > 北极的夜空
北极的夜空
<!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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。