Canvas Transformation

最新推荐文章于 2021-06-27 01:24:48 发布

Lo-ra

最新推荐文章于 2021-06-27 01:24:48 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yana_loo/article/details/51653768

本文介绍了Canvas绘图上下文中状态的保存与恢复机制。通过使用save()和restore()方法，可以方便地保存和恢复画布的当前样式及变形等状态，有效避免了频繁设置相同属性的繁琐。

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

Saving and restoring state

canvas的状态就是当前画面应用的所有样式和形变的一个快照。save and restore方法是用来保存和回复canvas状态的，都没有参数。

Canvas states are stored on a stack,Every time the save method is called,the current drawing state is pushed onto the stack.

A drawing state consists of

· 当前应用变形

· strokeStyle,fillStyle,globalAlpha,lineWidth,lineCap,lineJoin,miterLimit,shadowOffsetX,shadowOffsetY,shadowBlur,shadowColor,globalCompositeOperation的值

·当前的裁切路径(Clipping path)

没吃调用restore方法，上一个保存的状态就从堆中弹出来，所有设定都恢复。

                ctx.save();
                ctx.fillStyle='#FFF';
                ctx.globalAlpha=0.5;
                ctx.fillRect(40,40,100,100);

                ctx.restore();
                ctx.fillRect(50,50,70,70);