Canvas进阶篇：绘图状态详解

最新推荐文章于 2025-05-19 12:31:59 发布

wuhen_n

最新推荐文章于 2025-05-19 12:31:59 发布

阅读量848

点赞数 15

分类专栏： canvas教程：基础+动画文章标签：前端 html javascript canvas canvas状态状态保存状态恢复

本文链接：https://blog.csdn.net/wuhen_n/article/details/147928164

版权

canvas教程：基础+动画专栏收录该内容

25 篇文章

订阅专栏

Canvas进阶篇：绘图状态详解

Canvas 状态
- save()
- restore()
为什么需要状态保存和恢复？
状态示例
结语

Canvas 状态

Canvas 提供了两个方法来管理绘图状态：save()和restore()，前者允许我们保存当前的绘图环境状态，后者允许我们在需要时恢复环境状态。

save()

save()：保存状态，它会将当前 Canvas 的所有状态信息压入一个栈中。这些状态信息包括：

当前的变换矩阵（平移、旋转、缩放等）；
当前的剪切区域；
所有的绘图样式属性，如：填充颜色 (fillStyle)、描边颜色 (strokeStyle)、线条宽度 (lineWidth)、线条端点样式 (lineCap)、线条连接样式 (lineJoin)、阴影设置 (shadow*)、透明度 (globalAlpha)、字体设置 (font)、文本对齐方式 (textAlign)、文本基线 (textBaseline)等。

每次调用save()，都会在栈中添加一个新的状态记录。

restore()

restore()：状态恢复，它会从状态栈中弹出最近保存的状态，并将 Canvas 恢复到该状态。这意味着所有被修改的样式和变换都会被重置为保存时的状态。需要注意的是，如果调用restore()的次数超过了save()的次数，会抛出错误。

为什么需要状态保存和恢复？

在绘制复杂图形时，我们可能需要临时修改一些绘图状态（如颜色、变换等），但在完成特定绘制后，希望恢复到之前的状态。手动逐个恢复这些属性会非常繁琐且容易出错，而使用save()和restore()可以轻松解决这个问题。

状态示例

代码示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>状态示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
      // 获取Canvas元素和绘图上下文
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      // 保存初始状态
      ctx.save();

      // 绘制第一个圆（红色填充）
      ctx.fillStyle = 'red';
      ctx.beginPath();
      ctx.arc(150, 150, 100, 0, Math.PI * 2);
      ctx.fill();

      // 保存当前状态（红色填充）
      ctx.save();

      // 修改样式，绘制第二个圆（蓝色填充）
      ctx.fillStyle = 'blue';
      ctx.beginPath();
      ctx.arc(150, 150, 70, 0, Math.PI * 2);
      ctx.fill();

      // 保存当前状态（蓝色填充）
      ctx.save();

      // 修改样式，绘制第三个圆（绿色填充）
      ctx.fillStyle = 'green';
      ctx.beginPath();
      ctx.arc(150, 150, 40, 0, Math.PI * 2);
      ctx.fill();

      // 恢复到蓝色填充状态
      ctx.restore();

      // 使用蓝色填充绘制一个小矩形
      ctx.fillRect(200, 200, 30, 30);

      // 恢复到红色填充状态
      ctx.restore();

      // 使用红色填充绘制一个小矩形
      ctx.fillRect(50, 200, 30, 30);

      // 恢复到初始状态
      ctx.restore();

      // 使用默认样式绘制一条线
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(300, 300);
      ctx.stroke();
    </script>
  </body>
</html>