《JS原理、方法与实践》- canvas作图（五）- 环境的保存和恢复

在绘图的过程中经常需要对环境进行设置 例如填充样式、描边 在操作完之后 往往需要恢复到原来的环境 CanvasRenderingContext2D中可以使用save和restore方法快速操作。

环境的保存和恢复还可以进行多层嵌套。多次使用save方法可以创建多个保存点 每次调用restore方法都会按save相反的顺序获取所保存的环境。

实例

html

!DOCTYPE html

html lang en

head

    meta charset UTF-8

    meta name viewport content width device-width, initial-scale 1.0

    title Document /title

/head

body

    canvas id c2d width 600 height 600 浏览器不支持canvas /canvas

    script

       const canvas document.querySelector( #c2d

       if(canvas.getContext) {

           const ctx canvas.getContext( 2d

           ctx.save();

           ctx.fillStyle red

           ctx.fillRect(0,0,100,100);

           ctx.restore();

           ctx.fillRect(100,100,100,100);

       }

    /script

/body

/html