ok-admin/js/snowflake.js

/**
 * 雪花
 * canvas版 无需依赖jquery
 */


var configSnowflake = {};

/**
 * 雪球
 * eg: Snowflake(canvasID);
 * @param {[type]} elementName [description]
 */
var Snowflake = function (elementName) {

   configInit();
   var snowElement = document.getElementById(elementName);
   var canvasContext = snowElement.getContext("2d");
   var width = configSnowflake.clientWidth;
   var height = configSnowflake.clientHeight;

   //canvas尺寸修正
   snowElement.width = width;
   snowElement.height = height;

   //构建雪球的数量
   var snowNumber = 50;

   //构建雪球对象
   var snowArrObjs = initSnow(snowNumber, width, height);
   var snowArrNum = snowArrObjs.length;
   /**
    * 绘制页面
    * @return {[type]} [description]
    */
   var render = function () {
      //清理之前的矩形数据
      canvasContext.clearRect(0, 0, width, height);
      for (var i = 0; i < snowArrNum; ++i) {
         snowArrObjs[i].render(canvasContext);
      }
   };

   /**
    * 更新雪花
    * @return {[type]} [description]
    */
   var update = function () {
      for (var i = 0; i < snowArrNum; ++i) {
         snowArrObjs[i].update();
      }
   };

   /**
    * 绘制与更新
    * @return {[type]} [description]
    */
   var renderAndUpdate = function () {
      render();
      update();
      requestAnimationFrame(renderAndUpdate);
   };

   renderAndUpdate();
};

function initSnow(snowNumber, width, height) {
   //雪球参数
   var options = {
      //雪球的半球距离
      minRadius: 3,
      maxRadius: 10,
      // 运动的范围区域
      maxX: width,
      maxY: height,
      //速率
      minSpeedY: 0.05,
      maxSpeedY: 2,
      speedX: 0.05,
      //滤镜
      minAlpha: 0.5,
      maxAlpha: 1.0,
      minMoveX: 4,
      maxMoveX: 18
   };
   var snowArr = [];
   for (var i = 0; i < snowNumber; ++i) {
      snowArr[i] = new Snow(options);
   }
   return snowArr;
}

function configInit() {
   //rem设置
   (function(doc, win) {
      var docEl = doc.documentElement,
         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
         recalc = function() {
            var clientWidth = docEl.clientWidth;
            var clientHeight = docEl.clientHeight;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            //宽与高度
            document.body.style.height = clientWidth * (900 / 1440) + "px";
            configSnowflake.clientWidth = clientWidth;
            configSnowflake.clientHeight =  clientHeight;//clientWidth * (900 / 1440);
         };
      recalc();
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
   })(document, window);
}

/**
 * 雪球类
 */
function Snow(snowSettings) {
   this.snowSettings = snowSettings;
   this.radius = randomInRange(snowSettings.minRadius, snowSettings.maxRadius);
   //初始的x位置
   this.initialX = Math.random() * snowSettings.maxX;
   this.y = -(Math.random() * 500);
   //运行的速率
   this.speedY = randomInRange(snowSettings.minSpeedY, snowSettings.maxSpeedY);
   this.speedX = snowSettings.speedX;
   //滤镜
   this.alpha = randomInRange(snowSettings.minAlpha, snowSettings.maxAlpha);
   //角度.默认是360
   this.angle = Math.random(Math.PI * 2);
   //运行的距离
   this.x = this.initialX + Math.sin(this.angle);
   //x移动距离
   this.moveX = randomInRange(snowSettings.minMoveX, snowSettings.maxMoveX);
}

/**
 * 绘制雪球
 * @param  {[type]} canvasContext [description]
 * @return {[type]}               [description]
 */

Snow.prototype.render = function (canvasContext) {
   //清除路径
   //开始一个画布中的一条新路径（或者子路径的一个集合）
   canvasContext.beginPath();
   //用来填充路径的当前的颜色，白色的雪球
   canvasContext.fillStyle = "rgba(255, 255, 255, " + this.alpha + ")";
   //一个中心点和半径，为一个画布的当前子路径添加一条弧线
   //坐标，圆，沿着圆指定弧的开始点和结束点的一个角度
   //弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历
   canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
   //关闭子路径
   canvasContext.closePath();
   //fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径
   canvasContext.fill();
};

Snow.prototype.update = function () {
   this.y += this.speedY;
   if (this.y > this.snowSettings.maxY) {
      this.y -= this.snowSettings.maxY;
   }
   this.angle += this.speedX;
   if (this.angle > Math.PI * 2) {
      this.angle -= Math.PI * 2;
   }
   //?
};

/**
 * 随机处理
 * @param  {[type]} min [description]
 * @param  {[type]} max [description]
 * @return {[type]}     [description]
 */
function randomInRange(min, max) {
   var random = Math.random() * (max - min) + min;
   return random;
}