”聖誕節“-----好看的雪花效果有沒有？

   在經過了“平安夜”的洗禮，我想“2014-12-25的聖誕節”會特別的不一樣吧！ （一世的聖誕節只有這一次哦！）

     在此我祝博友們聖誕節安好，多收禮物哦！  

   12月，本該雪花漫天揮舞的季節，但是在北京的天空卻少見；

   12月，本該晴空萬里的天空，但是在北京確實霧霾永駐，讓人窒息；

   12月，“不可一世的12月”，好多人都說：“請好好對我？好嗎？”

   12月，2014的最后一個月，希望“幸福” “開心” “ 浪漫” 永駐身邊.........

既然今天是聖誕節，那么就用canvas簡單的寫一個雪花的小demo吧！（雖然北京沒有下雪，但是自己寫出來的也是很美的吧！）

1、HTML代碼

<canvas width="100%" height="100%" class="flare"></canvas>
<canvas width="100%" height="100%" class="snow"></canvas>
<canvas width="100%" height="100%" class="flake"></canvas>

2、css樣式

@charset "utf-8";
html{height:100%;}
body{
    background:#040764; /* Old browsers */
    padding:0;
    text-align:center;
    font-family:'open sans';
    position:relative;
    margin:0;
    height:100%;
    padding-bottom:50px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
a{text-decoration:none;}
canvas{display:block;width:100%;height:100%;top:0;left:0;position:fixed;}
canvas.flare{opacity:0.5;}

3、js 代碼

首先引用一個jquery-1.7.2.min.js  下載一個差價就好了！

其次就是寫的js  代碼了，

/* ===========================================================
 * jquery-let_it_snow.js v1
 * ===========================================================
 * NOTE: This plugin is based on the work by Jason Brown (Loktar00)
 *
 * As the end of the year approaches, let's add 
 * some festive to your website!
 *
 *
 * ========================================================== */

!function($){
  
  var defaults = {
    speed: 0,
    interaction: true,
    size: 2,
    count: 200,
    opacity: 0,
    color: "#ffffff",
    windPower: 0,
    image: false
    };
    
  
  $.fn.let_it_snow = function(options){
    var settings = $.extend({}, defaults, options),
        el = $(this),
        flakes = [],
        canvas = el.get(0),
        ctx = canvas.getContext("2d"),
        flakeCount = settings.count,
        mX = -100,
        mY = -100;
    
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
    (function() {
        var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
        window.requestAnimationFrame = requestAnimationFrame;
    })();
    
    function snow() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (var i = 0; i < flakeCount; i++) {
            var flake = flakes[i],
                x = mX,
                y = mY,
                minDist = 100,
                x2 = flake.x,
                y2 = flake.y;

            var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
                dx = x2 - x,
                dy = y2 - y;

            if (dist < minDist) {
                var force = minDist / (dist * dist),
                    xcomp = (x - x2) / dist,
                    ycomp = (y - y2) / dist,
                    deltaV = force / 2;

                flake.velX -= deltaV * xcomp;
                flake.velY -= deltaV * ycomp;

            } else {
                flake.velX *= .98;
                if (flake.velY <= flake.speed) {
                    flake.velY = flake.speed
                }
                
                switch (settings.windPower) { 
                  case false:
                    flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
                  break;
                  
                  case 0:
                    flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
                  break;
                  
                  default: 
                    flake.velX += 0.01 + (settings.windPower/100);
                }
            }

            var s = settings.color;
            var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
            var matches = patt.exec(s);
            var rgb = parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16);

            
            flake.y += flake.velY;
            flake.x += flake.velX;

            if (flake.y >= canvas.height || flake.y <= 0) {
                reset(flake);
            }


            if (flake.x >= canvas.width || flake.x <= 0) {
                reset(flake);
            }
            if (settings.image == false) {
              ctx.fillStyle = "rgba(" + rgb + "," + flake.opacity + ")"
              ctx.beginPath();
              ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
              ctx.fill();
            } else {
              
              ctx.drawImage($("img#lis_flake").get(0), flake.x, flake.y, flake.size * 2, flake.size * 2);
            }
            
        }
        requestAnimationFrame(snow);
    };
    
    
    function reset(flake) {
        
        if (settings.windPower == false || settings.windPower == 0) {
          flake.x = Math.floor(Math.random() * canvas.width);
          flake.y = 0;
        } else {
          if (settings.windPower > 0) {
            var xarray = Array(Math.floor(Math.random() * canvas.width), 0);
            var yarray = Array(0, Math.floor(Math.random() * canvas.height))
            var allarray = Array(xarray, yarray)
            
            var selected_array = allarray[Math.floor(Math.random()*allarray.length)];
            
             flake.x = selected_array[0];
             flake.y = selected_array[1];
          } else {
            var xarray = Array(Math.floor(Math.random() * canvas.width),0);
            var yarray = Array(canvas.width, Math.floor(Math.random() * canvas.height))
            var allarray = Array(xarray, yarray)
            
            var selected_array = allarray[Math.floor(Math.random()*allarray.length)];
            
             flake.x = selected_array[0];
             flake.y = selected_array[1];
          }
        }
        
        flake.size = (Math.random() * 3) + settings.size;
        flake.speed = (Math.random() * 1) + settings.speed;
        flake.velY = flake.speed;
        flake.velX = 0;
        flake.opacity = (Math.random() * 0.5) + settings.opacity;
    }
     function init() {
      for (var i = 0; i < flakeCount; i++) {
          var x = Math.floor(Math.random() * canvas.width),
              y = Math.floor(Math.random() * canvas.height),
              size = (Math.random() * 3)  + settings.size,
              speed = (Math.random() * 1) + settings.speed,
              opacity = (Math.random() * 0.5) + settings.opacity;
      
          flakes.push({
              speed: speed,
              velY: speed,
              velX: 0,
              x: x,
              y: y,
              size: size,
              stepSize: (Math.random()) / 30,
              step: 0,
              angle: 180,
              opacity: opacity
          });
      }
      
      snow();
    }
    
    if (settings.image != false) {
      $("<img src='"+settings.image+"' style='display: none' id='lis_flake'>").prependTo("body")
    }
    
    init();
    
    $(window).resize(function() {
      if(this.resizeTO) clearTimeout(this.resizeTO);
      this.resizeTO = setTimeout(function() {
        el2 = el.clone();
        el2.insertAfter(el);
        el.remove();
        
        el2.let_it_snow(settings);
      }, 200);
    });
    
    if (settings.interaction == true) {
      canvas.addEventListener("mousemove", function(e) {
          mX = e.clientX,
          mY = e.clientY
      });
    }
  }
}(window.jQuery);

這是一小段javascript 只要寫在html中就可以了，編寫了一些雪花的屬性，

<script type="text/javascript">
$(document).ready(function(){

    $("canvas.flare").let_it_snow({
        windPower: 0,
        speed: 0,
        color: "#392F52",
        size:120,
        opacity: 0.00000001,
        count: 30,
        interaction: false
    });

    $("canvas.snow").let_it_snow({
        windPower: 3,
        speed: 1,
        count: 250,
        size: 1.2
    });

    $("canvas.flake").let_it_snow({
        windPower: -3,
        speed: 2,
        count: 30,
        size: 15,
        image: "images/white-snowflake02.png"
    });

});
</script>

涉及到雪花小圖片一張（注：雪花的png  圖片即可）

 這樣呢，雪花的小效果就出來了，因為是canvas 寫的，所以它是動態的，所以我還不知道怎么把動態的效果圖展現出來，所以呢？想要看效果的博友們請動動手指copy一下，看效果吧！嘻嘻。。。。。。

簡單的就是這個圖片靜態的不好看，沒辦法了（）