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

最新推荐文章于 2022-01-12 09:08:02 发布

转载最新推荐文章于 2022-01-12 09:08:02 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yun-huang/p/3203771.html

本文详细解析了HTML5 Canvas API中的context.save()和context.restore()方法。通过具体示例展示了如何利用这两个方法来管理绘图状态，从而避免复杂的代码重复，并保持代码的简洁性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
<title>Just Canvas Demo</title>
<meta charset="utf-8">





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

转载于:https://www.cnblogs.com/yun-huang/p/3203771.html