画完一个图后
保存canvas状态→save()
保存使处安全状态，不影响别人，也不被他人影响。
接着画完别的图形后
恢复canvas状态→restore()
释放出原来安全区域的图形
养成好习惯。
<!doctype html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"></meta></head>
<body>
<canvas id="myCanvas" width="700" height="300"></canvas>
<script language="javascript">
//var c=document.getElementById("myCanvas");
//var ctx=c.getContext("2d");
function drawTop(ctx,fillStyle){
ctx.fillStyle这个是属性=fillStyle这个是参数;
ctx.beginPath();
ctx.arc(0,0,30,0,Math.PI,true); 角度均采用弧度制
ctx.closePath(); ture是逆时针，所以只画一个雨伞的话以0,0为原点逆时针旋转是看不见的，需要改变坐标，如（30,30……）（去掉移动函数记得获取画布环境
ctx.fill();
}
function drawGrip(ctx){
ctx.save(); 保存
ctx.fillStyle="blue";
ctx.fillRect(-1.5,0,1.5,40);
ctx.beginPath();
//那个钩
ctx.strokeStyle="blue";
ctx.arc(-5,40,4,Math.PI,Math.PI*2,true); 角度均采用弧度制
ctx.stroke();
//到此
ctx.closePath();
ctx.restore(); 恢复
}
function draw(){
var ctx=document.getElementById(‘myCanvas‘).getContext("2d");
ctx.translate(80,80);移动坐标空间，亦称“重置”
for(var i=1;i<10;i++)
{
ctx.save(); 保存
ctx.translate(60*i,0);
drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
drawGrip(ctx);
ctx.restore(); 恢复
}
}
window.onload=function(){
draw();
}
</script>
</body>
</html>
save()和restore()——弧度制——等5.4.2.html笔记,码迷,mamicode.com