理解 canvas 的 save() 和 restore()

前端

2023-12-21 19:50:12

概述

canvas 元素是一个强大的图形工具，允许您在网页中创建动态图形。canvas 元素提供了 save() 和 restore() 方法，允许您在绘图上下文中保存和还原状态。这对于创建复杂的绘图非常有用，例如包含多个图层的图像。

save() 方法

save() 方法将当前绘图上下文的状态保存在一个堆栈中。这包括以下信息：

当前变换矩阵
当前的剪辑路径
当前的绘图属性（例如线宽、线帽和线连接）
当前的填充和描边颜色
当前的混合模式
当前的全局 Alpha 值
当前的阴影设置
当前的文本属性（例如字体、字号和对齐）

restore() 方法

restore() 方法从堆栈中弹出一个先前保存的状态并将其应用于当前绘图上下文。这将覆盖当前绘图上下文中的所有设置。

使用 save() 和 restore()

save() 和 restore() 方法可以用于创建各种各样的绘图效果。例如，您可以使用它们来：

创建图层
应用变换
剪切路径
混合模式
设置阴影
设置文本属性

示例

以下示例演示如何使用 save() 和 restore() 方法来创建简单的分层图像：

<!DOCTYPE html>
<html>
<head>

<script>
window.onload = function() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  // 创建一个白色矩形
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, 100, 100);

  // 保存当前状态
  ctx.save();

  // 创建一个红色圆形
  ctx.fillStyle = "red";
  ctx.beginPath();
  ctx.arc(50, 50, 25, 0, Math.PI * 2, true);
  ctx.fill();

  // 还原之前保存的状态
  ctx.restore();

  // 创建一个蓝色圆形
  ctx.fillStyle = "blue";
  ctx.beginPath();
  ctx.arc(75, 75, 25, 0, Math.PI * 2, true);
  ctx.fill();
};
</script>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
</body>
</html>