如何理解canvas中的save与restore方法
2017-09-10 本文已影响0人
白富美呗
定义和用法
save()函数保存当前图像状态的一份拷贝。
这里的状态要说明一下，许多刚刚接触的同学都不明确这个状态指的是什么。
save() 函数把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态，然后，通过调用 restore() 来恢复以前的值。
一个画布的图形状态包含了 CanvasRenderingContext2D对象的所有属性（除了只读的画布属性以外）。它还包含了一个变换矩阵，该矩阵是调用 rotate()、scale() 和 translate()的结果。另外，它包含了剪切路径，该路径通过 clip()方法指定。
注意
当前路径和当前位置并非图形状态的一部分，如调用
fillRect和strokeRect后的结果，并不会由这个方法保存。只要理解了这个，就自然理解了canvas的save()函数
举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="border: 1px solid #000;"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var angle = 30;
setInterval(function () {
ctx.clearRect(0,0,canvas.width,canvas.height);
// 保存状态
ctx.save();
ctx.beginPath();
ctx.translate(200,150);
ctx.rotate(angle*Math.PI/180);
ctx.fillStyle = 'blue';
ctx.fillRect(-100,-50,200,50);
ctx.restore();
angle += 30;
},300);
</script>
</body>
</html>
注释掉ctx.save()函数后
去掉save方法后的效果
因为没有保存原始状态，每一次调用fillRect()都是从上次调用后的结果开始，导致画布乱飞。由于没有保存任何东西 所以，此时调用ctx.restore()也没有任何作用。
上面提到过，save()不会保存它的路劲和位置，这就解释了为什么调用restore()方法后画布不会变为空白了。
另外save()和restore()是成双成对的，千万不要拆散他们
完整效果图
完整效果图
