canvas中的restore()与save()

关于栈中的元素以及正在使用的元素

可以这样理解:

　　栈是一个仓库, 只是储存着我们需要的格式, 除了仓库中的东西, 我们手中还有一个正在使用的格式, 每一次往栈中存储的时候, 只是把我们手中的东西复制了一份放到了仓库中, 只有调用restore()函数的时候 我们才会从栈中取出一个格式替代我们手中正在使用的格式.

 

突然发现这种理解方式好像有点问题, 源于做签名小实验时, 本以为签名是粉色的, 但是结果总是黑色的

//签名小实验
var mycanvas = document.querySelector("#mycanvas");
if(mycanvas){
    var context = mycanvas.getContext("2d");
}

mycanvas.onmousedown = function (ev) {
    ev= ev || window.event;


    if(mycanvas.setCapture){
        mycanvas.setCapture();
    }

    context.beginPath();
    context.save();

    context.strokeStyle = "deeppink";
    context.lineWidth = 5;

    context.moveTo(ev.clientX - mycanvas.offsetLeft,
                    ev.clientY - mycanvas.offsetTop);

    document.onmousemove = function(ev){
        ev = ev || event;

        context.lineTo(ev.clientX - mycanvas.offsetLeft,
                        ev.clientY - mycanvas.offsetTop);
        context.stroke();



    }


    context.restore();
    document.onmouseup=function(){
        document.onmousemove=document.onmouseup=null;
        if(document.releaseCapture){
            document.releaseCapture();
        }
    }

    return false;




但是又同时与另外一个案例冲突

var mycanvas = document.querySelector("#mycanvas");
if(mycanvas){
    context = mycanvas.getContext("2d");
}

context.save();
context.fillStyle = "pink";
context.save();

context.fillRect(100,100,100,100);
context.restore();
context.fillRect(200,200,100,100);
context.restore();
context.fillRect(300,300,100,100);


有点不知道, 当前使用的格式是不是栈最顶层的格式.........



最初理解没有错, 可能是代码中的问题, 但是还是不知道原因, 可能是逻辑错误