仿google 的 let it snow（水雾版）

效果如上图：

1.google 的那个水雾不好看，所以就换了一个效果

2.用鼠标拖拽，水雾会消失

3.有飘雪

4.只支持google chrome15以上。用FF4以上也可以出现水雾效果。

想看效果，源码公布如下，直接copy paste当然是可以的。因为csdn好像不可以直接传rar文件。。。。

文件目录结构为

root(任意文件夹，然后用chrome双击index.html启动)

|_index.html

|_js

     |_snow.js

|_images

     |_b.png

     |_c.png

     |_background.png

或者直接登录我iteye博客下载zip包

http://rainsilence.iteye.com/blog/1325284

snow.js

(function() {var isIE = /msie/i.test(navigator.userAgent) && !window.opera;function mousePosition(e) {var event = e || window.event;if (event.pageX || event.pageY) {return {x:event.pageX, y:event.pageY};}return {x:event.clientX + document.body.scrollLeft - document.body.clientLeft,y:event.clientY + document.body.scrollTop - document.body.clientTop};}function getPosition(target) {var left = 0, top = 0;do {left += target.offsetLeft || 0;top += target.offsetTop || 0;target = target.offsetParent;} while(target);return {left: left,top: top};}var Class = (function() {                /**          * Initialze object from class.          * @param class object.          */          var initializeClass = (function() {              if (Object.create) {                  return Object.create;              } else {                  return function(o) {                      function F() {}                        F.prototype = o;                        return new F();                  };              }          })();            /**          * The main function of Class.          *           * @param classContent          * @param superClass          */          return function() {                var classPrototype = arguments[arguments.length - 1] || {};                for (var index = 0; index < arguments.length - 1; index++) {                    var superClass = arguments[index];                                    if (typeof superClass["initialize"] == "function") {                      classPrototype.superclass = superClass["initialize"];                  } else {                      classPrototype.superclass = function() {};                  }                                    for (var prop in superClass) {                        if (prop == "initialize" || prop == "newInstance") {                          continue;                      }                                            if (classPrototype.hasOwnProperty(prop)) {                          if (typeof superClass[prop] == "function") {                              classPrototype.superclass[prop] = superClass[prop];                          }                      } else {                          classPrototype[prop] = superClass[prop];                      }                  }              }              classPrototype.newInstance = function() {                  var instance = initializeClass(this);                  if (instance["initialize"]) {                      instance["initialize"].apply(instance, arguments);                  }                  return instance;              };              return classPrototype;          };      })();  /** * Canvas描绘工具类 */var GraphHelper = Class({container: null,width: null,height: null,ctx: null,initialize: function(containerId, width, height) {this.container = document.getElementById(containerId);this.width = width;this.height = height;},/** * 初始化ctx */getCtx: function() {if (!this.ctx) {var cvs = document.createElement('canvas');// 这里不能用style.width，否则drawImage会有bugcvs.width = this.width;cvs.height = this.height;cvs.style.position = 'absolute';this.container.appendChild(cvs);if (isIE) {G_vmlCanvasManager.initElement(cvs);cvs = document.getElementById(cvs.id);}this.canvas = cvs;this.ctx = cvs.getContext('2d');}return this.ctx;},/** * 画圆 */drawCircle: function(x, y, radius, fillColor, strokeColor) {var ctx = this.getCtx();ctx.beginPath();ctx.moveTo(x, y);ctx.arc(x, y, radius, 0, 2 * Math.PI, false);ctx.closePath();if (strokeColor) {ctx.strokeStyle = strokeColor;ctx.stroke();}if (fillColor) {ctx.fillStyle = fillColor;ctx.fill();}},drawImage: function(image, dx, dy, dw, dh, angle) {var ctx = this.getCtx();ctx.save();ctx.translate(dx, dy);ctx.rotate(angle);ctx.drawImage(image, dw / 2, dh / 2, dw, dh);ctx.restore();},/** * 清除Canvas */clear: function() {var ctx = this.getCtx();ctx.clearRect(0, 0, this.width, this.height);},/** * 注册事件 */addEventListener: function(event, fn) {this.canvas.addEventListener(event, fn, false);},/** * 注册Canvas Style */setStyle: function(props) {for (var prop in props) {this.canvas.style[prop] = props[prop];}}});var PixelHelper = Class(GraphHelper, {imageData: null,initialize: function(containerId, width, height) {PixelHelper.superclass.call(this, containerId, width, height);this.createMask();},createMask: function() {var ctx = this.getCtx();ctx.globalCompositeOperation = "destination-out";this.imageData = ctx.createImageData(this.width, this.height);var data = this.imageData.data;for (var index = 0; index < data.length; index++) {if ((index + 1) % 4 == 0) {data[index] = 0;} else {data[index] = 255;}}ctx.putImageData(this.imageData, 0, 0);},nextPixel: function() {var ctx = this.getCtx();var imageData = ctx.getImageData(0, 0, this.width, this.height);var data = imageData.data;for (var index = 0; index < data.length; index++) {if ((index + 1) % 4 == 0) {if (data[index] <= 121) {data[index]++;}if (data[index] >=  130) {data[index] = 0;}} else {data[index] = 255;}}ctx.putImageData(imageData, 0, 0);}});var Snow = Class({photoSrc: null,width: null,height: null,direct: false,currentAngle: 0,rotation: 0,initialize: function(photoSrc, width, height) {this.photoSrc = photoSrc;this.width = width;this.height = height;this.initParam();},initParam: function() {this.arcX = this.random(30, this.width - 30);this.radius = this.random(200, 400);this.arcY = -(this.radius + 80);this.maxAngle = this.random(15, 33) * Math.PI / 180;this.secondAngle = this.random(4, 10) / 10 / this.radius;this.angle = (this.random(-300, 300) % 4) / 10;this.scaleNum = this.random(4, 8) / 10;this.moveY = this.random(3, 24) /  10;this.image = this.photoSrc[this.random(0, 300) % this.photoSrc.length];},random: function(min, max) {return Math.round(Math.random() * (max - min) + min);},toNextPoint: function() {this.arcY += this.moveY;if (this.direct) {this.currentAngle += this.secondAngle;} else {this.currentAngle -= this.secondAngle;}var x = Math.sin(this.currentAngle) * this.radius + this.arcX;var y = Math.cos(this.currentAngle) * this.radius + this.arcY;if (this.currentAngle >= this.maxAngle) {this.direct = false;} else if (this.currentAngle <= -this.maxAngle) {this.direct = true;}this.rotation += .01;this.currentX = x;this.currentY = y;if (this.arcY > this.height) {this.initParam();}}});var SnowCanvas = Class({photoArr: null,snowArr: null,initialize: function(containerId, width, height) {this.helper = GraphHelper.newInstance(containerId, width, height);this.helper.getCtx();this.helper.setStyle({zIndex: 2});this.loadSource(["images/b.png", "images/c.png"], this.eventWrapper(this.play, this));},loadSnow: function(width, height) {this.snowList = [];for (var index = 0; index < 7; index++) {var snow = Snow.newInstance(this.photoArr, width, height);this.snowList.push(snow);}},loadSource: function(sourceArr, handler) {this.photoArr = [];var count = 0;for (var index = 0; index < sourceArr.length; index++) {var image = new Image();image.onload = function() {count++;if (count == sourceArr.length) {handler();}};image.src = sourceArr[index];this.photoArr.push(image);}},eventWrapper: function(fn, target) {return function(event) {fn.call(target, event);};},play: function() {this.loadSnow(this.helper.width, this.helper.height);var helper = this.helper;var snowList = this.snowList;setInterval(function() {helper.clear();for (var index = 0; index < snowList.length; index++) {var snow = snowList[index];var scale = 40 * snow.scaleNum;helper.drawImage(snow.image, snow.currentX, snow.currentY, scale, scale, snow.rotation);snow.toNextPoint();}}, 1000 / 60);}});var MaskCanvas = Class({isDragStart:false,lastX: 0,lastY: 0,initialize: function(containerId, width, height) {var helper = PixelHelper.newInstance(containerId, width, height);helper.getCtx();helper.setStyle({zIndex: 3,cursor: "pointer"});setInterval(function() {helper.nextPixel();}, 1000 / 60);this.helper = helper;helper.addEventListener('mousedown', this.eventWrapper(this.mouseDownHandler, this));helper.addEventListener('mousemove', this.eventWrapper(this.mouseMoveHandler, this));helper.addEventListener('mouseup', this.eventWrapper(this.mouseUpHandler, this));},eventWrapper: function(fn, target) {return function(event) {fn.call(target, event);};},getMouseCoord: function(event) {var mousePos = mousePosition(event);var canvasPos = getPosition(this.helper.container);return {x: mousePos.x - canvasPos.left,y: mousePos.y - canvasPos.top};},mouseDownHandler: function(event) {var mouseCoord = this.getMouseCoord(event);this.lastX = mouseCoord.x;this.lastY = mouseCoord.y;this.helper.drawCircle(mouseCoord.x, mouseCoord.y, 30, "rgba(255, 255, 255, 136)");this.isDragStart = true;},mouseMoveHandler: function(event) {if (this.isDragStart == false) {return;}var mouseCoord = this.getMouseCoord(event);var xDos = mouseCoord.x - this.lastX;var yDos = mouseCoord.y - this.lastY;var dos = Math.max(xDos, yDos);var factor = 10;if (dos > 200) {factor = 30;}var xFactor = xDos / factor;var yFactor = yDos / factor;var currentX = 0;var currentY = 0;for (var i = 0; i < 10; i++) {currentX += xFactor;currentY += yFactor;this.helper.drawCircle(this.lastX + currentX, this.lastY + currentY, 30, "rgba(255, 255, 255, 136)");}this.helper.drawCircle(mouseCoord.x, mouseCoord.y, 30, "rgba(255, 255, 255, 136)");event.preventDefault();this.lastX = mouseCoord.x;this.lastY = mouseCoord.y;},mouseUpHandler: function(event) {this.isDragStart = false;}});var Background = Class({initialize: function(containerId, imageUrl, handler) {var image = new Image();var targetThis = this;image.onload = function() {var container = document.getElementById(containerId);container.style.display = "inline-block";targetThis.createBackground(container, image);handler({width: image.width, height: image.height});};image.src = imageUrl;},createBackground: function(container, image) {var imgTag = document.createElement("img");imgTag.src = image.src;imgTag.width = image.width;imgTag.height = image.height;imgTag.style.zIndex = 1;imgTag.style.position = "absolute";container.appendChild(imgTag);}});SnowFactory = Class({initialize: function(containerId, imageUrl) {Background.newInstance(containerId, imageUrl, function(imageInfo) {SnowCanvas.newInstance(containerId, imageInfo.width, imageInfo.height);MaskCanvas.newInstance(containerId, imageInfo.width, imageInfo.height);});}});})();

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/snow.js"></script><script type="text/javascript">window.onload = function() {SnowFactory.newInstance("container", "images/background.png");}</script></head><body><div id="container"></div></body></html>

b.png

c.png

background.png