canvas.save()和canvas.restore()状态的保存和恢复使用方法及实例
canvas.save()用来保存先前状态的
canvas.restore()用来恢复之前保存的状态
注：两种方法必须搭配使用，否则没有效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="800" height="600"></canvas>
<script>
var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');
ctx.save();//状态的保存
ctx.setLineDash([5]);
ctx.lineWidth=4;
ctx.strokeStyle='red';
ctx.strokeRect(50,50,300,300);
ctx.restore();//状态的恢复
ctx.arc(400,300,150,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>