Canvas通过context.save()和context.restore()管理绘图状态，前者保存当前样式、变换、剪辑路径等状态到栈中，后者恢复最近保存的状态，确保局部操作不影响全局绘制。
Canvas保存绘图状态主要依靠
context.save()
和
context.restore()
这两个方法。它们允许你在特定时间点“冻结”当前绘图上下文的所有样式和变换设置，然后在需要时恢复到那个状态，就像是给你的画笔和画布设置拍了个快照。
解决方案
Canvas 2D API 提供了两个核心方法来管理绘图状态：
context.save()
和
context.restore()
。
context.save()
方法会将当前绘图上下文的所有状态推入一个栈中。这个“状态”包括了：
当前的变换矩阵（例如，你对画布进行了平移、旋转、缩放等操作）。
fillStyle
,
strokeStyle
（填充和描边颜色/样式）。
lineWidth
,
lineCap
,
lineJoin
,
miterLimit
（线条属性）。
font
,
textAlign
,
textBaseline
（文本属性）。
globalAlpha
（全局透明度）。
globalCompositeOperation
（全局合成操作）。当前的剪辑路径（clipping path）。
context.restore()
方法则会从栈中弹出最近保存的状态，并将其恢复为当前的绘图上下文状态。这意味着，在你调用
restore()
之后，所有在
save()
和
restore()
之间对上下文状态进行的更改都将被撤销，画布会回到
save()
时的状态。
这种机制非常强大，它允许你在不影响其他绘图部分的前提下，对局部区域进行复杂的样式或变换操作。
const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');// 初始状态：绘制一个蓝色矩形ctx.fillStyle = 'blue';ctx.fillRect(50, 50, 100, 50);// 保存当前状态ctx.save();// 改变状态：绘制一个红色、旋转的矩形ctx.fillStyle = 'red';ctx.translate(150, 150); // 平移原点ctx.rotate(Math.PI / 4); // 旋转45度ctx.fillRect(-25, -25, 50, 50); // 在新原点绘制// 恢复到之前保存的状态ctx.restore();// 恢复后的状态：绘制一个绿色矩形，不受之前红色矩形变换的影响ctx.fillStyle = 'green';ctx.fillRect(200, 50, 100, 50);
在这个例子中，即使我们在绘制红色矩形时进行了平移和旋转，绿色矩形依然在原始坐标系中以原始样式绘制，因为它是在
restore()
之后进行的，恢复了
save()
时的状态。
为什么在Canvas绘图中管理状态至关重要？
在我看来，管理Canvas绘图状态的重要性，很大程度上体现在代码的可维护性和模块化上。试想一下，如果你在一个复杂的场景中绘制了成百上千个不同形状、颜色、旋转角度的元素，而每次绘制前都要手动重置所有属性，那简直是噩梦。代码会变得冗长、难以阅读，而且极易出错。
save()
和
restore()
提供了一种优雅的解决方案。它就像给你的绘图过程打上了“检查点”。当你需要绘制一个特殊效果的元素时，你可以先
save()
当前的通用状态，然后尽情地修改
fillStyle
、
strokeStyle
、
translate
、
rotate
等属性，绘制完这个元素后，再
restore()
回去。这样，你对局部元素的修改就不会“污染”到全局或者后续的绘图操作。
我个人觉得，这有点像编程中的“作用域”概念。
save()
创建了一个临时的绘图“作用域”，在这个作用域里你可以自由发挥，而
restore()
则负责清理现场，确保你回到上一个干净的作用域。这对于构建可复用、独立的绘图组件尤其有用。比如，你有一个绘制自定义按钮的函数，它内部可能会改变颜色、字体、甚至进行一些缩放。如果这个函数每次执行都
save()
和
restore()
，那么无论它在哪里被调用，都不会对调用它的外部环境造成意外影响，这极大地提升了代码的健壮性和可预测性。
save()
save()
和
restore()
具体会影响哪些Canvas上下文属性？
一个常见的误解是
save()
和
restore()
会保存或恢复画布上的像素内容，但事实并非如此。它们只影响绘图上下文的状态，而不是画布上已经绘制的图像数据。
具体来说，当
context.save()
被调用时，以下这些属性和状态会被推入栈中：
变换矩阵 (Transformation Matrix): 包括
translate()
(平移),
rotate()
(旋转),
scale()
(缩放) 等操作累积形成的矩阵。这是最常被保存和恢复的。填充样式 (Fill Style):
context.fillStyle
的当前值，可以是颜色字符串、渐变对象或图案对象。描边样式 (Stroke Style):
context.strokeStyle
的当前值，同上。线条样式 (Line Styles):
context.lineWidth
(线宽)
context.lineCap
(线帽样式：
butt
,
round
,
square
)
context.lineJoin
(线连接样式：
miter
,
bevel
,
round
)
context.miterLimit
(斜接限制)
context.getLineDash()
和
context.setLineDash()
(虚线模式)
context.lineDashOffset
(虚线偏移)阴影样式 (Shadow Styles):
context.shadowOffsetX
context.shadowOffsetY
context.shadowBlur
context.shadowColor
文本样式 (Text Styles):
context.font
(字体)
context.textAlign
(文本对齐方式)
context.textBaseline
(文本基线)
context.direction
(文本方向)全局透明度 (Global Alpha):
context.globalAlpha
。全局合成操作 (Global Composite Operation):
context.globalCompositeOperation
，决定了新绘制的图形如何与现有图形混合。剪辑路径 (Clipping Path): 当前活动的剪辑区域。
理解这一点非常重要，它决定了你在使用
save()
和
restore()
时，哪些行为是预期内的，哪些则需要其他方法（比如使用离屏 Canvas 或
getImageData
/
putImageData
）来处理。
在复杂Canvas应用中，如何高效利用
save()
save()
和
restore()
？
在构建复杂的Canvas应用时，比如游戏、数据可视化仪表盘或者图形编辑器，
save()
和
restore()
的高效利用是提高代码质量和性能的关键。
一个非常实用的策略是封装绘图逻辑。我会把每个独立的图形组件或UI元素的绘制过程封装在一个函数里。这个函数内部的结构通常是这样的：
function drawComponent(ctx, x, y, options) { ctx.save(); // 保存当前绘图上下文状态 // 应用组件特有的变换和样式 ctx.translate(x, y); // 将原点移动到组件位置 if (options.rotation) { ctx.rotate(options.rotation); } ctx.fillStyle = options.color || 'black'; ctx.lineWidth = options.borderWidth || 1; // ... 更多样式设置 // 绘制组件的具体图形 ctx.beginPath(); ctx.arc(0, 0, options.radius || 20, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); ctx.restore(); // 恢复到调用前的状态}// 在主渲染循环中调用// drawComponent(ctx, 100, 100, { color: 'red', rotation: Math.PI / 6 });// drawComponent(ctx, 200, 150, { color: 'blue', radius: 30 });
通过这种模式，每个
drawComponent
函数都是自包含的。它在开始时保存状态，在结束时恢复状态，确保了无论它内部做了多少复杂的变换和样式修改，都不会影响到下一个组件的绘制。这大大减少了因为状态泄露而导致的bug，提升了代码的模块性和可重用性。
另一个高效利用的场景是分层绘制。想象一下一个地图应用，有背景图层、道路图层、POI（兴趣点）图层。你可以为每个图层单独设置剪辑路径、透明度或变换，并在绘制完一个图层后立即恢复，再开始绘制下一个图层。这样，不同图层之间的复杂交互和样式就不会互相干扰。
此外，性能方面，尽管
save()
和
restore()
涉及到栈操作，但它们的开销通常非常小，在大多数应用中可以忽略不计。过度担心它们的性能影响而选择手动重置所有属性，反而可能导致代码复杂性增加，更容易引入错误。只有在极端性能敏感的场景，且通过profiling确认
save()
和
restore()
确实是瓶颈时，才需要考虑优化。但说实话，这种情况在我多年的开发经验中并不常见，通常性能瓶颈会出现在像素操作、大量的路径计算或图片加载上。
总的来说，把
save()
和
restore()
看作是你的“上下文管理工具”，它们能帮助你构建更清晰、更健壮、更易于扩展的Canvas应用。
以上就是canvas如何保存绘图状态的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1573966.html
微信扫一扫 
支付宝扫一扫 
