Canvas绘图状态的保存和恢复（十）

首先，什么是状态，画布上的路径和位图并不属于状态，应该把状态看做2D渲染上下文属性的描述；是不是很难理解！！！
那就别理解了，看以下的例子你能基本理解这个意思！！！

1、保存绘图状态函数

context.save();
保存当前画布状态

代码使用：

context.fillStyle = "#123123";
context.save();//保持画布状态
context.fillRect(100,100,100,100);

这个代码其实就是保存了上面的颜色状态，并把它放入栈中，这里的栈就是后入先出，有严格的顺序，那怎么恢复这个状态呢？

2、恢复绘图状态函数

context.restore();
从栈中恢复点前最上面的画布状态

代码使用：

context.restore();
context.fillRect(100,100,100,100);

那这个功能有上面用呢？？
先给你来个小的作用（后面的章节有更大作用），就是画5个矩形，要求第1个矩形颜色和第4个颜色相同；第2个矩形和第3个相同；

第一的反应如果是在每次画矩形前使用context.fillStyle函数的话，恭喜你，以往的文章你学习的不错，但是下面就是用保存和绘图的方法来实现更轻松！
代码：

<!DOCTYPE html>     <!-- 告诉浏览器我们使用的HTML模板为HTML5 -->
<html lang="en">    <!-- 网页页面的根，其他元素均放在其中，只能有一个 -->
<head> <!--页面所有meta元素均包含在这里 -->
  <meta charset="UTF-8">    <!-- 编码方式  -->
  <title>Canvas高速入门</title>   <!-- 页面设置名称，显示在浏览器标题栏中 -->
  <!-- CSS 及 javascript 代码放置处 -->
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery库-->
  <script type="text/javascript">
    $(document).ready(function(){
      //alert("HELLO WORLD!!!")
      var canvas = $("#mycanvas");
      var context = canvas.get(0).getContext("2d");

      context.fillStyle = "#bb3123";
      context.save();//保持画布状态1
      context.fillRect(0,100,50,50);  //第1个

      context.fillStyle = "#45ab11";
      context.save();//保持画布状态2
      context.fillRect(100,100,50,50);  //第2个

      context.restore();//恢复画布状态2 栈最上面
      context.fillRect(200,100,50,50); //第3个

      context.restore();//恢复画布状态1 栈出来
      context.fillRect(300,100,50,50); //第4个

      context.fillRect(400,100,50,50); //第5个
    });
  </script>
</head>
<body>  <!-- 页面的主题内容均在这里 -->
<canvas width="500" height="500" id="mycanvas"  style="background-color: #113344"></canvas>

</body>
</html>

效果图：

发现很轻松就实现了！！！注意保存2次，恢复2次，此时栈中已经没有任何状态，第5个矩形这个时候就是使用最后一次出栈的属性，就是第1个矩形的属性！！！
那如果只恢复一次呢？？第4个和第5个绘图的属性就会使用最后一次出栈的属性，就是第2个矩形的属性！
代码：

<!DOCTYPE html>     <!-- 告诉浏览器我们使用的HTML模板为HTML5 -->
<html lang="en">    <!-- 网页页面的根，其他元素均放在其中，只能有一个 -->
<head> <!--页面所有meta元素均包含在这里 -->
  <meta charset="UTF-8">    <!-- 编码方式  -->
  <title>Canvas高速入门</title>   <!-- 页面设置名称，显示在浏览器标题栏中 -->
  <!-- CSS 及 javascript 代码放置处 -->
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery库-->
  <script type="text/javascript">
    $(document).ready(function(){
      //alert("HELLO WORLD!!!")
      var canvas = $("#mycanvas");
      var context = canvas.get(0).getContext("2d");

      context.fillStyle = "#bb3123";
      context.save();//保持画布状态1
      context.fillRect(0,100,50,50);  //第1个

      context.fillStyle = "#45ab11";
      context.save();//保持画布状态2
      context.fillRect(100,100,50,50);  //第2个

      context.restore();//保持画布状态2 栈最上面
      context.fillRect(200,100,50,50); //第3个

      //context.restore();//保持画布状态1 栈出来
      context.fillRect(300,100,50,50); //第4个

      context.fillRect(400,100,50,50); //第5个
    });
  </script>
</head>
<body>  <!-- 页面的主题内容均在这里 -->
<canvas width="500" height="500" id="mycanvas"  style="background-color: #113344"></canvas>

</body>
</html>

恢复一次效果图：

Canvas绘图状态的保存和恢复（十）

猜你喜欢