save()和restore()——弧度制——等5.4.2.html笔记

时间：2014-05-01 10:45:25 收藏：0 阅读：353

画完一个图后

保存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