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

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

要知道，Canvas 是基于“状态”来绘制的，每次绘制（fill() 或 stroke() ）的时候都会检查一次程序中所有的“状态”，

如果当前状态没有任何手动的改变，那么就会一直持续下去。

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

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

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

另外，clip()不支持strokeRect() 和 ctx.fillRect() 这两个方法;

如果一定要用的话请用 rect() 代替。

<script>
window.onload=function () {
let cans = document.getElementById("myCanvas");
let ctx = cans.getContext("2d");

ctx.strokeStyle="#9317F5";
ctx.lineWidth="3";
ctx.rect(30,30,300,200);
ctx.stroke();

ctx.clip();   //将上面定义的矩形作为一个绘图区域， 后面绘制的图形再大不会超出这个区域

ctx.beginPath();
ctx.arc(200,200,75,0,360*Math.PI/180);
ctx.closePath();
ctx.fillStyle="#FF89C9";
ctx.fill();
}
</script>

效果图：



如果设定了“剪切区域”后，还想在区域外面在 继续绘图，这时候就需要用到 状态 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);
}
}

效果图：



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);  //最后一句取得是第一次设置的颜色

效果图：