笔记-Canvas-画笔的存储与恢复机制学习

save()和restore()

1.画笔的两种状态方法,保存和恢复

(
    ()=>{
        //获取画布元素
        let canvas = document.getElementById('demo2');
        //获取画笔
        let ctx = canvas.getContext('2d');
        //开始绘画路径
        ctx.beginPath();
        //2px的红色直线
        ctx.lineWidth='2';
        ctx.strokeStyle="#f00";
        //长40,y轴上20的水平直线
        ctx.moveTo(20,20);
        ctx.lineTo(60,20);
        //描边
        ctx.stroke();
        //保存画笔的状态
        ctx.save();
        //然后画一条线
        ctx.lineTo(60,60);    
        //描边
        ctx.stroke();
    }
)();

这里是画完一条红线之后继续补充了一条垂直线,虽然save()过了,但是描边之后,颜色依旧,这样其实也能看出来,画笔也是有全局污染的所以我们可以把不同的图像放到不同的函数中,减少画笔的全局污染.

(
    ()=>{
        //获取画布元素
        let canvas = document.getElementById('demo2');
        //获取画笔
        let ctx = canvas.getContext('2d');
        //开始绘画路径
        ctx.beginPath();
        //2px的红色直线
        ctx.lineWidth='2';
        ctx.strokeStyle="#f00";
        //长40,y轴上20的水平直线
        ctx.moveTo(20,20);
        ctx.lineTo(60,20);
        //描边
        ctx.stroke();
        //保存画笔的状态
        ctx.save();
        //重新定义画笔的宽度和颜色
        //4px的宽度和绿色
        ctx.lineWidth='4';
        ctx.strokeStyle="#0f0";
        //然后画一条线
        ctx.lineTo(60,60);    
        //描边