canvas_7_状态保存和恢复

最新推荐文章于 2024-10-04 00:46:18 发布

熙哥_tito

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量114

点赞数

分类专栏： canvas 文章标签：前端

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。

本文链接：https://blog.csdn.net/weixin_49471755/article/details/131004793

版权

canvas 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

save() 和 restore()

save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。

1、关于 save() ：Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。

2、关于restore()：每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复(类似数组的 pop())。

<body>
  <canvas id="can1" width="300" height="300"></canvas>
  <script>
    (() => {
      let canvas = document.getElementById('can1');
      if (!canvas.getContext) return;
      let ctx = canvas.getContext("2d");
      ctx.fillRect(0, 0, 150, 150);   // 使用默认设置绘制一个矩形
      ctx.save();                  // 保存默认状态

      ctx.fillStyle = 'red'       // 在原有配置基础上对颜色做改变
      ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形

      ctx.save();                  // 保存当前状态
      ctx.fillStyle = '#FFF'       // 再次改变颜色配置
      ctx.fillRect(30, 30, 90, 90);   // 使用新的配置绘制一个矩形

      ctx.restore();               // 重新加载之前的颜色状态
      ctx.fillRect(45, 45, 60, 60);   // 使用上一次的配置绘制一个矩形

      ctx.restore();               // 加载默认颜色配置
      ctx.fillRect(60, 60, 30, 30);   // 使用加载的配置绘制一个矩形
    })()
  </script>
</body>