canvas基础学习（三）

一、图片加载控件

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

调用代码也比较简单

<script type="text/javascript" src="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

        });

效果图为：

demo的下载放到csdn上去了，地址为

http://download.csdn.net/detail/hufengsky123/9337827

巴特西

canvas基础学习（三）

最新文章

热门文章