完整代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title>星空特效</title><style type="text/css">html,body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}.container {width: 100%;height: 100%;margin: 0;padding: 0;background-color: #000;}</style></head><body><div id="container" class="container"></div><script src="/jquery-3.2.1.min.js"></script><script type="text/javascript">var STARFIELD = {STAR_COUNT: 500,MAX_STAR_SIZE: 3,MIN_STAR_SIZE: 1,MAX_STAR_SPEED: 2,MIN_STAR_SPEED: 0.5,init: function() {this.setParameters();this.createStars();this.animateStars();},setParameters: function() {this.$container = $('#container');this.width = this.$container.width();this.height = this.$container.height();this.canvas = $('<canvas />').attr({width: this.width,height: this.height}).appendTo(this.$container).get(0);this.context = this.canvas.getContext('2d');this.stars = [];},createStars: function() {for (var i = 0; i < this.STAR_COUNT; i++) {var star = {x: Math.random() * this.width,y: Math.random() * this.height,size: Math.random() * (this.MAX_STAR_SIZE - this.MIN_STAR_SIZE) + this.MIN_STAR_SIZE,speed: Math.random() * (this.MAX_STAR_SPEED - this.MIN_STAR_SPEED) + this.MIN_STAR_SPEED,color: this.getRandomColor()};this.stars.push(star);}},getRandomColor: function() {var r = Math.floor(Math.random() * 256);var g = Math.floor(Math.random() * 256);var b = Math.floor(Math.random() * 256);return 'rgb(' + r + ',' + g + ',' + b + ')';},animateStars: function() {setInterval(function() {this.updateStars();this.drawStars();}.bind(this), 30);},updateStars: function() {for (var i = 0; i < this.STAR_COUNT; i++) {var star = this.stars[i];star.y += star.speed;if (star.y > this.height) {star.y = 0;star.x = Math.random() * this.width;star.color = this.getRandomColor();}}},drawStars: function() {this.context.clearRect(0, 0, this.width, this.height);for (var i = 0; i < this.STAR_COUNT; i++) {var star = this.stars[i];this.context.fillStyle = star.color;this.context.fillRect(star.x, star.y, star.size, star.size);}}};$(function() {STARFIELD.init();});</script></body></html>
