学步园

关于canvas的save()和restore()，前面一直以为canvas的画面也会保存，然后restore后把画面恢复，那么就这样把自己给绕进去了，那么save和restore之间的操作还有何意义？？？  

摸爬滚打后理解了save 保存的是画布的坐标旋转缩放 以及fillstyle 和 其他等等的相关属性，已经画好了的图画不在之列。

做了个菊花 和 前面做的图片旋转移动 的 demo 来巩固下。

依然先看效果

---------------------代码分割线-----------------------------------------------------------------------------------------

var $=function(id){

    return document.getElementById(id);

 }

 var isinit=false;

/** Canvas 类

 * 

 * @param {Object} height

 */

var g_loadings = [];

function Canvas(height, con){

    if (height == null) {

        height = 24;

    }

    this.obj = document.createElement("canvas");

    var width = height;

    if(con != null){

        width += 82;

    }

    this.obj.setAttribute("width", width+500);

    this.obj.setAttribute("height", height+500);

    this.height = height;

    this.ctx = this.obj.getContext("2d");

    // RGB

    this.color = [51, 51, 51];

    var fsize = "14px";

    if(height>24){

        fsize = "16px";

    }

    this.ctx.save();

    this.ctx.fillStyle = "#646464";

    this.ctx.font = fsize+" \"Microsoft YaHei\",Helvetica";

    this.ctx.textBaseline = "middle";

    this.ctx.fillText(con, height+5, height/2);

    this.ctx.restore();

}

// 记录转动的度数,分8步

Canvas.prototype.rotation = 0;

// 每隔125ms会调用一次,绘制一个loading圆

Canvas.prototype.draw = function(){

    var h = this.height, ctx = this.ctx, c = h / 16, d = h / 5, degree = -Math.PI * 2 / 10;

    

    //ctx.save();

    // clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent

    ctx.clearRect(-200, -200, 500, 500);



    // 移到中点

    if (!isinit){

        ctx.translate(h / 2, h / 2);

        isinit=true;

    }

    





    // 把一个圆分成8段,分别绘制    

    for (var i = 0; i < 10; i++) {



        ctx.save();

        // 旋转一段的度数

        ctx.rotate(i * degree);

        // 根据旋转的角度设置颜色与透明度,eg:

        // rotation=0 的时候, alpha的值 1, 0.875 ... 0.125

        // rotation=1 的时候, alpha的值 0.875, 0.75 ... 1

        ctx.fillStyle = "rgba(" + this.color[0] + "," + this.color[1] + "," + this.color[2] + "," + (10 - (i + this.rotation) % 10) / 10 + ")";

        // 绘制 fillRect(x,y,width,height) : Draws a filled rectangle

        ctx.fillRect(-c / 2, d, c, d);

        ctx.restore();

    }

    //ctx.restore();



    this.rotation++;

    this.rotation %= 10;

    var load_canvas=this;

    load_canvas.running = window.setTimeout(function(){load_canvas.draw();load_canvas=null;}, 100); // 由于分成10段,所以时间为100ms

};



/**

 * 创建Canvas

 * 

 * @param {Object} parent 父节点,之前必须要至少一个子节点存在

 * 如 <a ><span>取消</span></a>

 * @param {Object} height 长/高

 */

function initCanvas(parent, height, con){

    // 如果是有子节点,说明需要做 loading 动画

    if (parent && parent.firstChild && parent.firstChild.id != "sp") {

        // 创建 Canvas

        var canvas = new Canvas(height, con);

        canvas.obj.id = "sp";

        // 放进数组

        g_loadings.push(canvas);

        parent.insertBefore(canvas.obj, parent.firstChild);

        if (!canvas.running) {

            

            canvas.draw();

        }

    }

}



/**

 * 删除 Canvas

 * @param {Object} parent 父节点

 * @param 返回 1 说明成功删除了一个正在loading状态的canvas

 */

function removeCanvas(parent){

    if (parent && parent.firstChild && parent.firstChild.id == "sp") {

        // loop整个数组中的 canvas 

        for (var i = g_loadings.length; --i >= 0;) {

            var canvas = g_loadings[i];

            if (canvas.obj == parent.firstChild) {

                //从 Dom 移除

                parent.removeChild(parent.firstChild);

                // remove interval 

                window.clearInterval(canvas.running);

                canvas.running = null;

                // 去掉

                g_loadings.splice(i, 1);

                return 1;

            }

        }

    }

    return 0;

}

function getOuterHeight(obj){

    var mtop = obj.style.marginTop;

    if(mtop==""){

        mtop = 0;

    }

    var mbottom = obj.style.marginBottom;

    if(mbottom==""){

        mbottom = 0;

    }

    return obj.offsetHeight+parseInt(mtop)+parseInt(mbottom);

}

/**

 * 页面统一 loading

 * @param btnObj 如果有，则只给这个按钮加，否则整个页面

 */

function loading(btnObj, height, con){



    if(con == null){

        con = "正在载入...";

    }

    if(btnObj){

        if(height == null){

            height = 24;

        }

        //给按钮加上loading

        btnObj.setAttribute("selected", "progress");

        btnObj.style.display = "block";

        try{

            initCanvas(btnObj, height, con);

        }catch(ex){}

    }else{

        if(height == null){

            height = 32;

        }

        //全局的

        if(!$("preloader")){

            var oDiv = document.createElement("div");

            oDiv.id = "preloader";

            oDiv.style.textAlign = "center";

            //oDiv.style.position = "relative";

            var oSpan = document.createElement("span");

            oDiv.appendChild(oSpan);

            document.getElementsByTagName("body")[0].appendChild(oDiv);

        }

        var overlay = $("preloader");

        //var oHeight = getOuterHeight(overlay);

        //定位到中间

        //var top = parseInt(Math.max((getClientHeight() - oHeight) / 2, 0) + getScrollTop());

        //overlay.style.top = (top-height)+"px";

        overlay.style.marginTop = "150px";

        overlay.style.display = "block";

        try{

            initCanvas(overlay, height, con);

        }catch(ex){}

    }

}



/**

 * 停止页面统一loading

 * @param btnObj 如果有，则只给这个按钮，否则整个页面

 * @return 1/0 如果返回1说明已经有对应的实例在loading状态,此时要根据情况判断是否继续

 */

function unloading(btnObj){

    var result = 0;

    if(btnObj){

        //给按钮加上loading

        result = removeCanvas(btnObj);

        btnObj.removeAttribute("selected");

        btnObj.style.display = "none";

        return result;

    }else{

        //全局的 

        var overlay = $("preloader");

        result = removeCanvas(overlay);

        overlay.style.display = "none";

        overlay.style.marginTop = "";

        return result;

    }

}



loading(null , 110  );