模拟星空闪烁

Html

Css

 * {
	margin:0;
	padding:0;
}
html,body {
	width:100%;
	height:100%;
}
#canvas {
	display:block;
	background-color:#040c11;
}

(function(window) {
    if (window) {
        window.onload = function() {
            //获取canvas
            var canvas = document.getElementById('canvas');
            //获取画布
            var content = canvas.getContext('2d');

var cw = innerWidth,
                ch = innerHeight;
            var dotsArr = [];
            canvas.width = cw;
            canvas.height = ch;

(function fn() {
                window.onresize = function() {
                    cw = innerWidth;
                    ch = innerHeight;
                    canvas.width = cw;
                    canvas.height = ch;
                } //接收一个指向自己的函数，在事件触发的时候执行
            })();

function Dot() {};

Dot.prototype = {
                init: function() {
                    this.w = rand(0, cw);
                    this.h = rand(0, ch);
                    this.r = rand(0.2, 1.5);
                    this.speedX = rand(-1, 1);
                    this.speedY = rand(-1, 1);
                    this.color = 'white'
                },
                draw: function() {
                    content.fillStyle = this.color;
                    content.beginPath();
                    content.arc(this.w, this.h, this.r, 0, Math.PI * 2);
                    content.fill();
                },
                move: function() {
                    this.w += this.speedX;
                    this.h += this.speedY;
                    if (this.w < 0 || this.w > cw) {
                        this.speedX *= -1;
                    }
                    if (this.h < 0 || this.h > ch) {
                        this.speedY *= -1;
                    }
                    this.draw();
                },
                shine: function() {
                    this.r = rand(0.5, 1);
                    this.draw();
                }
            }

//生成点对象
            function createDots(num) {
                if (num) {
                    for (var i = num; i > 0; i--) {
                        var dots = new Dot();
                        dots.init();
                        dots.draw();
                        dotsArr.push(dots);
                    }
                }
            }

function rand(min, max) {
                return (Math.random() * (max - min)) + min;
            }

createDots(400);

// setTimeout(function(){    //递归调用setTimeout
            //     content.clearRect(0,0,cw,ch);
            //     for(var i of dotsArr){
            //         i.move();
            //         // for(var j=0;j<stars.length/2;j++ ){
            //         //     var line = new Line();
            //         //     line.initStarLine();
            //         //     line.drawLine(i.w,i.h,stars[j].w,stars[j].h);
            //         // }
            //     }
            //     setTimeout(arguments.callee,1000/5);
            // },1000/60);

setInterval(function() {
                content.clearRect(0, 0, cw, ch);
                for (var i of dotsArr) {
                    // i.move();
                    i.shine();
                }
            }, 1000 / 5)
        }
    }
})(window)

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

模拟星空闪烁



代码描述：使用原生的js实现星空动画

使用原生js，有问题下方回答

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

艾森豪威尔

相关代码

模拟星空闪烁

最新