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>
恢复一次效果图: