”圣诞节“-好看的雪片效果有没有_.NET相关

”圣诞节“-----好看的雪花效果有没有？

在经过了“平安夜”的洗礼，我想“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);

View Code

这是一小段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一下，看效果吧！嘻嘻。。。。。。

简单的就是这个图片静态的不好看，没办法了（）

8楼锋NaN: 发现了妹子～

7楼洁宝成熟时: 圣诞快乐

6楼酷小孩: 赞！

5楼Stone_He: 圣诞快乐

4楼LanJerry: 圣诞节快乐

3楼迷惘却坚定: 所以呢圣诞快乐^^

2楼梦入神机: ........圣诞果然剩单了

1楼banshine: 赞一个