js 下雪 ;(function() { var Canvas = function(w, h) {this.width = w;this.height = h; }; var Snow = function() {}; Canvas.prototype = {init: function () { var oC = document.createElement("canvas"); oC.setAttribute('width', this.width); oC.s
;(function() { var Canvas = function(w, h) { this.width = w; this.height = h; }; var Snow = function() {}; Canvas.prototype = { init: function () { var oC = document.createElement("canvas"); oC.setAttribute('width', this.width); oC.setAttribute('height', $("html").height()); oC.setAttribute('id', 'canvas'); document.body.appendChild(oC); } }; Snow.prototype = { random: function (min, max) { return Math.random() * (max - min) + min; }, init: function () { this.x = this.random(0, width); this.y = 0; this.r = this.random(1, 5); this.vy = this.random(3, 5); }, draw: function (cxt) { cxt.beginPath(); cxt.fillStyle = 'white'; cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false); cxt.fill(); cxt.closePath(); this.update(cxt); }, update: function (cxt) { if (this.y < height - this.r) { this.y += this.vy; } else { this.init(); } } } var curWinWidth = window.innerWidth, curWinHeight = window.innerHeight; var oCanvas = new Canvas(curWinWidth, curWinHeight); oCanvas.init(); var oC = document.querySelector('#canvas'); var width = oC.width, height = oC.height, oGc = oC.getContext('2d'); var snow = []; for (var i = 0; i < 50; i++) { var timeoutId = null; clearTimeout(timeoutId); timeoutId = setTimeout(function () { var oSnow = new Snow(); oSnow.init(); snow.push(oSnow); }, 500 * i); } (function move() { oGc.clearRect(0, 0, width, height); for (var i = 0; i < snow.length; i++) { snow[i].draw(oGc); } requestAnimationFrame(move); })(); })();