Canvas状态的保存和恢复

• ctx.save()：将画布的当前状态保存起来，相当于在内存之中产生一个样式快照

  一个绘画状态包括：

  • 当前的一些样式：strokeStyle, fillStyle, lineWidth, lineCap, lineJoin, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, textBaseline等

  • 当前应用的变形（即移动，旋转和缩放）

  • 当前的裁切路径（clipping path）

• ctx.restore()：将画布的样式恢复到之前保存的快照

xxxxxxxxxx
        ctx.fillRect(0, 0, 300, 300)//绘制矩形
        ctx.save()//保存当前状态

        ctx.fillStyle = 'green'//设置填充色
        ctx.fillRect(30, 30, 240,240)//绘制矩形
        ctx.save()//保存当前状态

        ctx.fillStyle='#fff'//设置填充色
        ctx.fillRect(60,60,180,180)//绘制矩形

        ctx.restore()//恢复上一个状态
        ctx.fillRect(90,90,120,120)

        ctx.restore()//恢复上上一个状态
        ctx.fillRect(120,120,60,60)

实时效果反馈

1.下列描述错误的是：

A ctx.save()保存当前画布状态

B ctx.restore()第一次调用则代表恢复第一次ctx.save()的状态

答案

1=>B