html5阴影save restore,HTML5 canvas save和restore方法讲解

HTML5 canvas 是一个强大的绘图API，提供了一些方法来帮助开发者控制绘图状态。其中两个非常有用的方法是 save() 和 restore()。

save() 方法用于保存当前绘图状态，包括当前的变换矩阵、剪切区域和样式属性等。调用 save() 方法后，我们可以对绘图状态进行任意修改，而不会影响到之前保存的状态。

restore() 方法用于恢复之前保存的绘图状态。调用 restore() 方法后，我们可以回到之前保存的状态，并且继续在该状态下进行绘图操作。

这两个方法通常是成对使用的。例如，我们可以在进行一些复杂的绘图操作之前调用 save() 方法来保存当前状态，然后在绘制完成后调用 restore() 方法来恢复之前的状态。这样可以避免对后续绘图操作造成影响。

下面是一个简单的示例代码，演示了如何在 canvas 中使用 save() 和 restore() 方法：

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

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

// 绘制一个矩形，并修改一些属性
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
ctx.strokeStyle = "blue";
ctx.lineWidth = 3;
ctx.strokeRect(20, 20, 30, 30);

// 恢复之前的状态
ctx.restore();

// 绘制一个圆形，此时样式属性已经恢复到之前的状态
ctx.beginPath();
ctx.arc(100, 50, 30, 0, 2*Math.PI);
ctx.fillStyle = "green";
ctx.fill();
</script>

在上面的代码中，我们首先调用了 save() 方法来保存当前状态，然后绘制了一个红色填充、蓝色边框的矩形。接着，我们又调用了 restore() 方法来恢复之前保存的状态。最后，我们绘制了一个绿色的圆形，此时样式属性已经恢复到之前的状态。