HTML5 画布 – 保存和恢复状态

在HTML5中，Canvas元素提供了制作图形和动画的强大工具。Canvas API允许在该元素中绘制各种形状、图像和文本。本文将深入讨论如何保存和恢复Canvas状态。

Canvas状态

Canvas状态是指画布上的当前状态——例如，已经应用的任何变换、线性渐变、平面渐变、图案或阴影。Canvas状态由方法提供，例如 save() 和 restore()。iOS系统和Android系统都支持Canvas状态。

下面介绍Canvas的两个方法：

save()

save() 方法是Canvas API中的一个重要方法。该方法用于保存绘图状态，即将当前状态推入Canvas状态堆栈中。通过调用 restore() 方法，您可以将保存的状态从堆栈中弹出，Canvas就会返回到该保存的状态。

以下示例演示了如何使用save()和restore()方法：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,80,80);
ctx.save();
ctx.fillStyle="#00FF00";
ctx.fillRect(10,10,60,60);
ctx.save();
ctx.fillStyle="#0000FF";
ctx.fillRect(20,20,40,40);
ctx.restore();
ctx.fillRect(25,25,30,30);
ctx.restore();
ctx.fillRect(35,35,10,10);
</script>

</body>
</html>

在上面的例子中，我们使用save()方法，将红色正方形推进堆栈中。然后，我们在绿色正方形上又用save()方法将绿色正方形推进堆栈中。然后，我们在蓝色正方形上使用了 save()方法将蓝色正方形推进堆栈中。最后，我们使用 restore()方法将上一个状态弹出，使画布的绘图颜色从蓝色变成绿色。然后，再使用 restore()方法将上一个状态弹出，使画布的绘图颜色从绿色变成红色。

restore()

restore()方法是用于从Canvas状态堆栈中取回绘图状态，紧接着它就会应用到画布中。restore()方法没有参数。

以下示例演示了如何使用restore()方法：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,80,80);
ctx.save();
ctx.fillStyle="#00FF00";
ctx.fillRect(10,10,60,60);
ctx.save();
ctx.fillStyle="#0000FF";
ctx.fillRect(20,20,40,40);
ctx.restore();
ctx.fillRect(25,25,30,30);
ctx.restore();
ctx.fillRect(35,35,10,10);
</script>

</body>
</html>

在上面的例子中，我们使用restore()方法将保存的状态从堆栈中弹出三次，实现从蓝色变绿色、绿色变成红色、红色变成画布背景颜色的效果。