北极的夜空（转载）

最新推荐文章于 2018-08-08 14:31:30 发布

_let

最新推荐文章于 2018-08-08 14:31:30 发布

阅读量311

点赞数

分类专栏：前端文章标签： canvas

前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

本文转自：http://blog.csdn.net/pandora_madara/article/details/38128823

这里写图片描述

<!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>

_let

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
北极的夜空（转载）

本文转自：http://blog.csdn.net/pandora_madara/article/details/38128823<!DOCTYPE html><html><head> <style type="text/css"> body { width: 100%; height: 100% } </style> <script type="text
复制链接

扫一扫

专栏目录