Canvas 恢复画板状态 restore() - Canvas 基础教程

上一章节中我们有提到 Canvas 可以看作是一个图层，可以使用 save() 方法保存状态，然后可以使用 restore() 方法恢复状态

但上一章节我们只讲了 save() 方法，没有详细讲到 restore() 方法

为什么不一起讲，因为，我实在不想写多个范例，每次变量命名很容易搞混

Canvas restore() 方法

ctx.restore() 方法用于将画布恢复到最近一次的保存状态

如果没有保存状态，此方法不做任何改变

语法

void ctx.restore();

范例

有了 save() 方法和 save() 方法，我们就可以重写之前那个秒针的范例了

<!DOCTYPE html>
<meta charset="utf-8">
<canvas id="canvas-1" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
var colors = ['#D0021B','#F5A623','#8B572A','#417505','#9013FE','#000000']


function drawBg() {
    for( var j=0; j < 60; j++ ) {
        ctx.fillStyle = "#000";
        ctx.fillRect(75,0,3,2);
        ctx.rotate(6 * Math.PI / 180);        
    }    
}

var i = 0;
function draw() {
    ctx.clearRect(8,-2,64,6);
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(8,-2,64,6);
    ctx.rotate(6 * Math.PI / 180);
    ctx.fillStyle = colors[i3%6];
    ctx.fillRect(10,0,60,2);
    i3++;
}

ctx.translate(100,100);
drawBg();
setInterval(function(){draw();},1142);
</script>