Canvas基础3-绘图状态的保存与恢复
<!doctype html>
<html lang="en">
<head>
<title>Just Canvas Demo</title>
<meta charset="utf-8">
<!--<style>-->
<!--canvas{-->
<!--border:1px solid orangered;-->
<!--}-->
<!--</style>-->
<script src="D:/myweb/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
context.strokeStyle = "rgb(255,0,0)";
context.strokeStyle = "rgb(0,0,255)"; //(1)
context.save();
context.strokeRect(10,10,100,100);
//
context.strokeStyle = "rgb(0,255,0)";
context.beginPath();
context.arc(120,120,60,0,Math.PI,false);
context.closePath();
context.stroke();
//
context.restore(); //(2)
// 注释上面这句和不注释这一句的两种结果对比很明显
context.strokeRect(160,160,100,100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="500px">
</canvas></body></html>
====================================================================
对context.save();的解释：
2D渲染上下文可以保存一个绘图状态栈，是一组之前保存的状态
其中最近保存的状态位于栈的顶部。
绘图状态的默认栈是空的。
可以多次调用save()方法，会逐一保存在栈中，有严格顺序的。
对context.restore()的解释：
恢复画布状态，即save的状态；
====================================================================
下面通过不同的情况来分析：
1.假如上述代码中的(1)那行代码还没加，则程序的运行结果如图：
save()保存了context.strokeStyle = "rgb(255,0,0)";这个红色状态，虽然后来又有context.strokeStyle = "rgb(0,255,0)";这个绿色状态的重设制，但是经过restore()方法又把红色状态给恢复了，所以第二个矩形框是红色而不是绿色。
=================================================================================
2.上述代码不改变的情况下的结果如下图：
即保留(1)、(2)着两行代码时，结果
第一个矩形不是红色了，而是蓝色，因为我接着故意重设了context.strokeStyle = "rgb(0,0,255)"; //(1)，然后save()
保存的最顶部的也自然是蓝色了，所以第二个矩形自然也就是蓝色了。
=============================================================================
3.保留(1)那行代码，注释掉(2)那行代码，与上述1、2做了下对比
================================================================================
4、(1)、(2)都注释掉，则save()之后并没有使用恢复，导致虽然保存了context.strokeStyle = "rgb(255,0,0)";这个红色状态，
但是被之后的圆形context.strokeStyle = "rgb(0,255,0)";绿色状态给覆盖了，所以第二个矩形自然也就是绿色的了。
================================================================================
如果觉得有点绕，没关系，只要动手操作，改代码进行结果的对比，就能很好的理解绘图状态保存与恢复的作用了。
还是在此简述下吧：
设想一下，我们正在用10像素宽，颜色为红色的笔画图，然后把画笔设置成1像素宽，颜色变成绿色。绿色画完之后呢，我们想接着用10像素的红色来画，如果没有save与restore，那我们就不得不重新设置一遍画笔——如果画笔状态过多，那我们的代码就会大量增加；而且，这些设置过程是重复而乏味的。这时候，我们就可以在红色笔的时候save保存一下画布状态，然后在绿色笔画完了之后，restore还原一下画笔状态，之前的红色笔不就一瞬间就回来了吗！
注意：
最后保存的最先还原！restore总是还原离他最近的save点（已经还原的不能第2次还原到它）。
浙公网安备 33010602011771号