HTML5 Canvas 开发绘图方法整理【十三、Canvas重点之：状态】

快来打我* 2022-05-31 10:05 254阅读 0赞

#### Canvas最重要的两个概念，一个是路径，另一个就是状态了。 ####

要知道，Canvas 是基于“状态”来绘制的，每次绘制（fill() 或 stroke() ）的时候都会检查一次程序中所有的“状态”，  
如果当前状态没有任何手动的改变，那么就会一直持续下去。

clip()     从原始画布中剪切任意形状和尺寸。

clip()可以将某个基本图形设定为“剪切区域”， 一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。

可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

另外，clip()不支持strokeRect() 和 ctx.fillRect() 这两个方法;  
如果一定要用的话请用 rect() 代替。

效果图：  
![这里写图片描述][70]

--------------------

如果设定了“剪切区域”后，还想在区域外面在 继续绘图，这时候就需要用到 状态 save() 和 restore();

save() 保存当前环境的状态  
restore() 返回之前保存过的路径状态和属性  
这两种一般情况下也都是配对使用的;

ctx.save();   //将状态保存起来
            ctx.beginPath();
            ctx.arc(150,150,110,0,360*Math.PI/180);
            ctx.closePath();
            ctx.strokeStyle="#15399B";
            ctx.stroke();
    
            ctx.clip();     //定义剪切的图形，超出部分不显示
    
            let pic=new Image();
            pic.src="img/img5.png";
            pic.onload=function () { 
                ctx.drawImage(pic,50,10);
            };
    
            btn.onclick=function () { 
                ctx.restore();      //在这恢复到定义剪切前的状态， 继续绘制
    
                let img=new Image();
                img.src="img/img4.png";
                img.onload=function () { 
                    ctx.drawImage(img,220,100);
                }
            }

效果图：  
![这里写图片描述][70 1]

Canvas 状态的保存和恢复 一般用于在图形或图片被裁减 或 变形时使用，或者当部分属性改变的时候使用，例如：fillStyle 、strokeStyle、 font 等；

Canvas在以下状态改变的时候可以使用save() 来保存当前状态 并在需要结束的时候用restore() 恢复到保存前的状态;  
包含：  
填充效果： fillStyle、  
描边效果：strokeStyle 、  
线条效果：lineCap,lineWidth等、  
文本效果：font、textAlign等、  
阴影效果： shadowBlur 、 shadowColor等 、  
全局属性：globalAlpha 、globalCompositeOperation

需要注意的是save() 只能用来保存“状态”， 不能保存“图形”，也不是更新路径，  
对于Canvas 来说 只有一个！上下文环境， 对于路径和状态 这两种一定要好好区分开

--------------------

再举一个利用“状态” 设置“跨行取色”的样式：

ctx.lineWidth="5";
            ctx.strokeStyle="#B946C6";
            ctx.save();
    
            ctx.strokeRect(10,50,200,10);
    
            ctx.strokeStyle="#0695FF";
            ctx.strokeRect(10,100,200,10);
    
            ctx.restore();
    
            ctx.strokeRect(10,150,200,10); //最后一句取得是第一次设置的颜色

效果图：  
![这里写图片描述][70 2]

[70]: /images/20220531/ce1ba48424114c17ab0c98eb4ac2f911.png
[70 1]: /images/20220531/e9496764d31d4e42b82d728faadb4a35.png
[70 2]: /images/20220531/8230ea4a89914112b5389c8898467846.png