HTML Canvas - save() 方法

Canvas 2D API 的 HTML Canvas save() 方法用于通过将当前状态推到状态堆栈上来保存 Canvas 元素的整个状态。

语法

以下是 HTML Canvas save() 方法的语法 −

CanvasRenderingContext2D.save();

参数

由于此方法在调用时只是保存画布的状态，所以它不接受任何参数。

返回值

它不会直接返回任何内容，而是在调用时将当前状态存储到堆栈中。

示例

以下示例使用 HTML Canvas state() 方法将一个正方形保存在状态堆栈中。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="210" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.save();
      context.strokeRect(25, 20, 150, 100);
   </script>
</body>
</html>

输出

以下代码在网页上返回的输出 −

示例

以下示例先保存一个形状，然后使用 HTML Canvas save() 方法将其还原到画布元素中。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="250" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.fillStyle = 'orange';
      context.fillRect(40, 40, 200, 150);
      context.save();
      context.fillStyle = 'white';
      context.fillRect(55, 55, 170, 120);
      context.save();
      context.fillStyle = 'green';
      context.fillRect(70, 70, 140, 90);
      context.restore();
      context.fillRect(85, 85, 110, 60);
      context.restore();
      context.fillRect(100, 100, 80, 30);
   </script>
</body>
</html>

输出

以下代码在网页上返回的输出 −

html_canvas_shadows_and_transformations.htm

打印页面

上一个

下一个