在经过了“平安夜”的洗礼，我想“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一下，看效果吧！嘻嘻。。。。。。
简单的就是这个图片静态的不好看，没办法了（
）