Canvas基础3-绘图状态的保存与恢复

来源：互联网发布：无敌淘宝网小说免费编辑：程序博客网时间：2024/05/21 12:45

今天复习两个知识点：

<!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次还原到它）。

===================================================================================================

最后我想说，越接触HTML5这个东东，越发感觉那些“发明家”的伟大，强大的技术。