canvas入门（七） 中心旋转

canvas入门系列

canvas入门（一） 绘制线与正方形
canvas入门（二） 标签width与style:width的区别
canvas入门（三） 绘制代码分块
canvas入门（四） 绘制线的扩展api
canvas入门（五） 贝塞尔曲线
canvas入门（六） 旋转、偏移、缩放
canvas入门（七） 中心旋转

运行以下代码

<script type="text/javascript">
	window.onload = function(){
		var canvas = document.getElementsByTagName('canvas')[0];
		var context = canvas.getContext('2d');
		context.beginPath();
		context.rotate(30*Math.PI/180);
		context.fillStyle = "skyblue";
		context.rect(10,10,50,50);
		context.fill();
		context.closePath();

		context.beginPath();
		context.fillStyle = "#ccc";
		context.rect(50,50,50,50);
		context.fill();
		context.closePath();
	}
</script>

运行结果

在实际开发中我们时常需要部分图案旋转，部分按正常来绘制这时该如何解决呢？
以下是我最初的解决办法,在需求角度改变时重新旋转角度(例如回到初始0度),反向旋转上面的角度就ok

<script type="text/javascript">
	window.onload = function(){
		var canvas = document.getElementsByTagName('canvas')[0];
		var context = canvas.getContext('2d');
		context.beginPath();
		context.rotate(30*Math.PI/180);
		context.fillStyle = "skyblue";
		context.rect(10,10,50,50);
		context.fill();
		context.closePath();

		context.beginPath();
		context.rotate(-30*Math.PI/180);
		context.fillStyle = "#ccc";
		context.rect(50,50,50,50);
		context.fill();
		context.closePath();
	}
</script>

运行结果

ok吧,是不是没有问题,可是怎么看都感觉不正常,真的就是这么简单粗暴么？nonono,来看看正经的

<script type="text/javascript">
	window.onload = function(){
		var canvas = document.getElementsByTagName('canvas')[0];
		var context = canvas.getContext('2d');
		context.save();
		context.beginPath();
		context.rotate(30*Math.PI/180);
		context.fillStyle = "skyblue";
		context.rect(10,10,50,50);
		context.fill();
		context.closePath();
		context.restore();

		context.beginPath();
		context.fillStyle = "#ccc";
		context.rect(50,50,50,50);
		context.fill();
		context.closePath();
	}
</script>

运行结果

是不是和之前的结果一样？这样才看着有模有样。操作方法介绍
context.save();保存当前绘图环境
context.restore();恢复绘图环境