Canvas 恢复画板状态 restore()

上一章节中我们有提到 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>

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.