canvas基础学习（三）

一、图片加载控件

在canvas效果制作中常常要使用多张图片，为了提高用户体验，需要给用户提供一个图片加载中的过度页面效果。过度效果，我在项目中使用的是Sonic.js，它在git上的地址为https://github.com/padolsey/Sonic，个人认为它的样式和扩展性都还不错，使用方式也比较简单。效果图为：

调用代码也比较简单

<script type="text/javascript" src='/images/loading.gif' data-original="js/sonic.js"></script><script>      var loading = new Sonic({        width: 100,        height: 100,        stepsPerFrame: 1,        trailLength: 1,        pointDistance: .1,        fps: 15,        padding: 10,        fillColor: '#fff',        setup: function() {          this._.lineWidth = 20;        },        path: [          ['line', 0, 20, 100, 20],          ['line', 100, 20, 0, 20]        ]      });      loading.play();      document.body.appendChild(loading.canvas);    </script>

下面是自己写的一个图片加载的工具方法

(function(window,undefind){  //图片加载控件  function imgLoad(options){    var defaults = {      imgArr : [] ,    //图片数组      loadOverCallback : null    //加载完成的回调函数    };    var opts = $.extend(true , defaults , options || {}) ,      imgSize = opts.imgArr.length , //需要加载图片的个数      completeSize = 0;    function beginLoad() {      for (var index in opts.imgArr) {        var src = opts.imgArr[index];        src && loadImg(src);      }    }    function loadImg(src) {    //加载图片      var image = new Image(),        handleLoadOver = function() {          completeSize++;          checkLoadOver();        };      image.src = src;      if (image.complete) { //图片有缓存        handleLoadOver();      } else {        image.onload = function() { //图片获取成功          handleLoadOver();        };      }    }    function checkLoadOver() {  //查询是否已经加载完毕      if (completeSize != imgSize) return;      if(opts.loadOverCallback && typeof opts.loadOverCallback === "function"){        opts.loadOverCallback();      }    }    beginLoad()//开始执行  }  window.imgLoad = imgLoad;})(window);

代码的逻辑就是把需要加载的图片url，以数组的形式传入，然后通过new Image()对象进行加载，每加载完毕一个执行一次检查是否完毕的函数，当所有图片全部加载完则执行结束的回调函数。调用方法为：

window.imgLoad({    imgArr : [      "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"    ],      loadOverCallback : function(){      //结束操作....    }  });

二、指定元素上飘雪、彩带、星星的效果

(function(window , document , undefind){    //canvas特效  function canvasEffect(options) {    var defaults = {      ele : document.getElementById("body"), //覆盖元素      type : "snow" , //snow为雪花，band为彩带，star为星星      particleMax : 200 ,   //元素最大数      particleCount : 100 , //使用元素数目      bandColorArr : ["#82F269", "#F61326", "#F6F313", "#518DF6"] , //彩带颜色数组      vy : 1 ,  //Y轴上的运动速度      vyFloat : 1.5 ,    //Y轴速度浮动的系数      vx : 0.5 ,  //X轴上的运动速度      vxFloat : 1 ,    //X轴速度浮动的系数      w : 8 , //元素的宽度      wFloat : 2 ,   //宽度的浮动系数      h : 12 , //元素的高度      hFloat : 4 , //高度的浮动系数      o : 0.4 , //元素的透明度      oFloat : 0.5 ,  //透明度的浮动系数      r : 1 ,  //半径      rFloat : 2  ,//半径的浮动值      snowColor : "#FFF"  //雪花的颜色    }    var opts = $.extend(true, defaults, options || {});    var canvas = document.createElement('canvas'),      ctx = canvas.getContext('2d'),      width = opts.ele.clientWidth,      height = opts.ele.clientHeight,      i = 0 , active = false , objFlakes = [] , objFlake,      lastDate = 0 , dateDel = 0 , isChange = false;    var starPic = new Image();    starPic.src = "img/star.png";    canvas.style.position = 'absolute';    canvas.style.left = canvas.style.top = '0';    var Objflake = function() {      this.reset();  //初始化    };    Objflake.prototype.reset = function() {      this.x = Math.random() * width;      this.y = Math.random() * -height;      this.vy = opts.vy + Math.random()*opts.vyFloat;      this.vx = opts.vx - Math.random()*opts.vxFloat;      this.w = opts.w + Math.random()*opts.wFloat;      this.h = opts.h + Math.random()*opts.hFloat;      this.o = opts.o + Math.random()*opts.oFloat;      this.color = opts.bandColorArr[parseInt(Math.random() * opts.bandColorArr.length)];      this.c = Math.random() > 0.5 ? 1 : -1;      this.r = opts.r + Math.random()*opts.rFloat;      this.picNo = Math.floor(Math.random() * 7);    };    function generatebandFlakes() {  //初始化元素个数      objFlakes = [];      for (i = 0; i < opts.particleMax; i++) {        objFlake = new Objflake();        objFlake.reset();        objFlakes.push(objFlake);      }    }    function update() {  //更新      ctx.clearRect(0, 0, width, height);      if (!active) {        return;      }      if(opts.type == "star"){        var nowDate = Date.now();        dateDel += nowDate - lastDate;        lastDate = nowDate;        isChange = (dateDel > 60);        if(isChange){          dateDel = 0;        }      }      for (i = 0; i < opts.particleCount; i++) {        objFlake = objFlakes[i];        objFlake.y += objFlake.vy;        objFlake.x += objFlake.vx;        if(opts.type == "snow"){          drawSnow(objFlake.x, objFlake.y, objFlake.r , objFlake.o);        }else if(opts.type == "band"){          drawBand(objFlake.x, objFlake.y, objFlake.color, objFlake.w,            objFlake.h, objFlake.c, objFlake.o);        }else if(opts.type == "star"){          if(isChange){            objFlake.picNo += 1;            objFlake.picNo = objFlake.picNo%7;          }          ctx.drawImage(starPic, objFlake.picNo * 7, 0, 7, 7, objFlake.x, objFlake.y, 7, 7);        }        if (objFlake.y > height) {          objFlake.reset();        }      }      requestAnimFrame(update);    }    //画彩带    function drawBand(x, y, color, w, h, c, alpha, isRotate, rotatePI) {      var leakdep = h < 10 ? 2 : 8;      var leak = c > 0 ? leakdep : -(leakdep);      ctx.save();      ctx.fillStyle = color;      ctx.globalAlpha = alpha;      ctx.beginPath();      ctx.moveTo(x, y - h);      ctx.lineTo(x + w, y - h);      ctx.quadraticCurveTo(x + w + c, y - h / 2, x + w + leak, y);      ctx.lineTo(x + leak, y);      ctx.quadraticCurveTo(x + c, y - h / 2, x, y - h);      ctx.fill();      ctx.closePath();      ctx.restore();    }    //画雪花    function drawSnow(x , y , r , o){      ctx.save();      ctx.fillStyle = opts.snowColor;      ctx.globalAlpha = o;      ctx.beginPath();      ctx.arc(x , y , r , 0, Math.PI * 2, false);      ctx.fill();      ctx.closePath();      ctx.restore();    }    function onResize() {      width = opts.ele.clientWidth;      height = opts.ele.clientHeight;      canvas.width = width;      canvas.height = height;      lastDate = Date.now();      var wasActive = active;      active = width > 300;      if (!wasActive && active) {        requestAnimFrame(update);      }    }    window.requestAnimFrame = (function() {      return window.requestAnimationFrame ||        window.webkitRequestAnimationFrame ||        window.mozRequestAnimationFrame ||        function(callback) {          window.setTimeout(callback, 1000 / 60);        };    })();    generatebandFlakes();    onResize();    opts.ele.appendChild(canvas);    window.addEventListener('resize', onResize, false);  }  window.canvasEffect = canvasEffect;})(window,document);

代码如上，逻辑就是在指定的ele元素上，创建一个canvas标签，高宽同ele元素，在这个画布上绘制雪花、彩带或者星星图片，根据动画函数requestAnimationFrame函数以及预先定义好的x,y轴方向的速度，进行一帧一帧的绘制，每一帧的x,y坐标发生变化，进行产生动画效果。星星的图片为

调用方式如下：

1、星星

window.canvasEffect({      ele : document.getElementsByTagName("body")[0] ,       type : "star" ,       particleMax : 300 ,         particleCount : 150 ,      vy : 0.3 ,      vyFloat : 0.3 ,          vx : 0.3 ,        vxFloat : 0.6 ,          o : 0.3 ,      oFloat : 0.3 ,      });

效果图为：

2、彩带

window.canvasEffect({      ele : $("body")[0] ,       type : "band" ,       particleMax : 200 ,         particleCount : 100 ,      bandColorArr : ["#82F269", "#F61326", "#F6F313", "#518DF6"] ,       w : 8 ,       wFloat : 2 ,         h : 12 ,       hFloat : 4 ,       o : 0.4 ,      oFloat : 0.5 ,        r : 1 ,        rFloat : 2      });

效果图为：

3、雪花

window.canvasEffect({      ele : $("body")[0] ,       type : "snow" ,       particleMax : 200 ,         particleCount : 100 ,      o : 0.4 ,      oFloat : 0.5 ,        r : 1 ,        rFloat : 2      });

效果图为：

原标题：canvas基础学习（三）

关键词：