搞懂 ctx.restore();ctx.save();ctx.beginPath();

本文详细解析了Canvas中beginPath(), ctx.save() 和 ctx.restore() 函数的功能与使用方法。beginPath()用于开始新的路径绘制;ctx.save()保存当前绘图状态;ctx.restore()则恢复之前保存的状态。

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

在做canvas时钟时,ctx.restore();ctx.save();ctx.beginPath();反复用到!

那么,这几个函数到底是什么功能呢?有什么区别和联系呢?

1.beginPath()

w3c上的解释:beginPath() 方法在一个画布中开始子路径的一个新的集合。

也就是说,运行到这个函数时,context中止当前的路径,立刻把当前的坐标设置为起点(0,0),开始一条新的路径。

2. ctx.restore()

W3C的解释是:

restore() 方法从栈中弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值。

3.ctx.save()

W3C的解释是:

保存当前图像状态的一份拷贝。

那么可以看出:save()和restore()的区别在于:

save()把当前状态推入到绘图堆栈中,而restore()从绘图堆栈中的顶端弹出最近保存的状态,并且根据这些存储的值来设置当前绘图状态。

废话再说一遍:save()主要用来保存目前Canvas的状态。通过save()函数它会将目前Canvas的状态推到绘图堆栈中。

                         restore()是从绘图堆栈中弹出上一个Canvas的状态。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值