Canvas Transformation

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

Lo-ra

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

阅读量219

点赞数

本文链接：https://blog.csdn.net/yana_loo/article/details/51653768

版权

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);