canvas实现固定元素背景雪花效果
前台页面:
<body id="test" style="background-color: gray;"> <img src="img/banner.jpg" alt="" style="z-index: 0;"/> <label style=" position: absolute; left:200px;top:170px">请输入密码:</label> <input type="text" value="" style=" position: absolute; left:200px;top:200px; z-index: 1;"/> <input type="button" style=" position: absolute; left:220px;top:240px;z-index: 1;" value="登录"/> <input type="button" style=" position: absolute; left:300px;top:240px;z-index: 1;" value="注册"/> <script type="text/javascript" > $("#test").geneEffect(); </script> </body>
引入snow.js:
(function($){ $.fn.extend({ geneEffect:function(options){ var ecf=new effect(this,options); //添加画布 this[0].appendChild(canvas); } }) var canvas = document.createElement('canvas'); //样式设置 canvas.style.position = 'absolute'; canvas.style.left = canvas.style.top = '0'; var ctx = canvas.getContext('2d'); var enitites=[]; var defaults={ ele:$('body')[0],//元素 type:"snow",//特效类型 x: 0.5, //x轴移动速度 y:1,//y轴移动速度 w:600,//宽度 h:500,//高度 max:200,//存储的一次性产生的最大数目 radius:1.5,//半径 opacity:0.9,//透明度 color: "#FFF"//颜色 } var effect=function(ele,options){ if(options==null||typeof(options)=="undefined") options={}; options.ele=ele[0]; canvas.width=ele[0].clientWidth; canvas.height=ele[0].clientHeight; //设置高度宽度 (与覆盖元素一样) this.width = ele[0].clientWidth; this.height =ele[0].clientHeight; //覆盖defaults defaults=$.extend({},defaults,options) defaults.w=this.width; defaults.h=this.height; //创建实体集合 this.createEnities(); //绘出界面 update(); } effect.prototype={ createEnities:function(){ enitites=[]; for(var i=0;i<defaults.max;i++){ var def=new opt(); enitites.push(def); } } } //实体类 var opt=function(){ this.init();//初始化方法 } opt.prototype.init=function(){ this.x=defaults.w*Math.random()+defaults.x; this.y=defaults.h*Math.random()+defaults.y; this.opacity=defaults.opacity*Math.random(); this.radius=defaults.radius+Math.random(); this.type=defaults.type; } //每一帧走一次 function update(){ //清空画布 形成动画效果 ctx.clearRect(0,0,canvas.width,canvas.height); var flag=0; for (var i=0;i<enitites.length;i++) { var opt=enitites[i]; //如果是雪花特效 if(opt.type=="snow"){ opt.x=opt.x+Math.random()*0.5; opt.y=opt.y+Math.random()*1; //生产雪花 snowEffect(opt.x,opt.y,opt.opacity, opt.radius); } //超过高度在执行一下init方法 if(opt.y>canvas.height) { opt.init(); } } //重绘画面接着执行update requestAnimFrame(update); } function snowEffect(x,y,o,r){ //alert("1") ctx.save(); //ctx.strokeStyle="#FFF"; ctx.fillStyle = "#FFF"; ctx.globalAlpha=o; ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2,false); ctx.fill(); ctx.closePath(); ctx.restore(); } window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })(); })(jQuery)
静态图效果如下():
