关于save()和restore()问题（好帮手慕灰灰请进）

不小心手滑点到采纳了，没办法再接着问，不好意思

原问题【save()是不是一次性的，我发现save()以后，用restore()恢复，第一次有效，第二次就无法再回到之前save()的环境了】

这里说的第二次是指只用了一次save()，使用第二次restore()读取它之前环境时是无效的，请老师帮忙解答

人生的起源 2019-12-26

源自：HTML5 Canvas绘图基础 7-7 编程练习

收起

3回答

好帮手慕星星回答被采纳获得+3积分 2019-12-30 10:52:16

同学你好，理解的没有问题，save方法是一次性的。第二次不能只使用restore恢复状态，还需要再次保存之前的状态：

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

提问者人生的起源 2019-12-30 02:02:24

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>canvas</title>
    <style type="text/css">
        canvas { border: 1px solid red; }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript"></script>
</head>
<body>
<html>
<body>
<canvas id="myCanvas" width="600" height="400">您的浏览器不支持canvas</canvas>

<script type="text/javascript">
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    ctx.lineWidth = 6;

    //只使用一次save();
    ctx.save();

    ctx.strokeStyle = 'red';
    ctx.arc(100, 100, 50, 0, 2*Math.PI, true);
    ctx.fill();
    ctx.stroke();

    //第一次调用restore();
    ctx.restore();

    ctx.beginPath();
    ctx.fillStyle = 'blue';
    ctx.arc(300, 100, 50, 0, 2*Math.PI, true);
    ctx.fill();
    ctx.stroke();

    //第二次调用restore();
    ctx.restore();

    ctx.beginPath();
    ctx.arc(500, 100, 50, 0, 2*Math.PI, true);
    ctx.fill();
    ctx.stroke();
</script>
</body>
</html>
</body>
</html>

第一次使用restore()方法，strokeStyle有恢复到save()之前的默认黑色
第二次使用restore()方法，fillStyle就没有恢复到save()之前的默认黑色了
这里面我只用了一次save()，所以我想问save()是不是一次性的，不然为什么第二次使用restore()方法，无法让fillStyle还原为默认黑色？

收起回答