Canvas学习:save()和restore()

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

本来今天想开始学习怎么在Canvas中绘制矩形。但昨天发朋友圈,聊到Canvas。有网友提醒我将所有绘制的东西放在ctx.save()ctx.restore(),能起到保存绘制状态和防止污染状态栈。养成一个良好的习惯。

此时一脸蒙逼!因为我并不知道这两个东东是什么意思,怎么使用?

后来翻了书,也只是提到了在Canvas中有save()restore()两个方法,它们都是属于Canvas中CanvasRenderingContext2D中与状态操作有关的两个方法。并没有详细的介绍,对于初学者的我而言,也是一知半解。下面的内容记录了我对save()restore()两个方法的一些理解。

Canvas 状态的保存和恢复

Canvas的API提供了两个名叫save()restore()的方法,用于保存及恢复当前Canvas绘图环境的所有属性。其中save()可以保存当前状态,而restore()可以还原之前保存的状态。

这两个方法再绘图中有着重要的作用,比如我们在绘图的时候需要使用多种颜色,颜色需要不时的切换。那么使用save()restore()方法即可比较方便的实现此功能。

理解save()和restore()

对于save()restore()方法,一开始有一个错误的理解,以为每一步都save()之后restore()就等同于command + z(或者ctrl + z),其实save()保存的只是CanvasRenderingContext2D对象的状态以及对象的所有属性,并不包括这个对象上绘制的图形。

Canvas中状态和非状态

在Canvas环境中绘图时,可以利用所谓的绘图堆栈状态。每个状态随时存储Canvas上下文数据。下面是存储在状态堆栈的数据列表。

  • 当前的坐标变换(变换矩阵)信息,比如旋转或平移时使用的rotate()setTransform()方法
  • 当前剪贴区域
  • 图形上下文对象(CanvasRenderingContext2D)的当前属性值

CanvasRenderingContext2D的当前属性值主要包括:

属性 描述
canvas 取得画布<canvas>元素
fillStyle 填充路径的当前的颜色、模式或渐变
globalCompositeOperation 指定颜色如何与画布上已有颜色组合(合成)
lineCap 指定线段端点的绘制方式
lineJoin 指定线段连接的绘制方式
lineWidth 绘制线段的宽度
miterLimit lineJoinmiter时,这个属性指定斜连接长度和二分之一线
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/canvas/canvas-states.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部