canvas入门（六）旋转、偏移、缩放

canvas入门系列

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

欢迎查看canvas第六节内容,本节内容主要介绍canvas的translate、scale、rotate三种方法

canvas之rotate

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

绘制效果如下

context.rotate(angle);旋转角度，以弧度计。例如上面的例子是旋转20度;
在做旋转操作时切记先旋转画布再进行绘画，如果先绘制再旋转与正常绘制无表面区别。
继续分析上述例子,大家是否观察出了旋转中心点？再看一个例子

<script type="text/javascript">
	window.onload = function(){
		var canvas = document.getElementsByTagName('canvas')[0];
		var context = canvas.getContext('2d');
		context.beginPath();
		context.fillStyle = "#ccc";
		context.rect(0,0,100,100);
		context.fill();
		context.closePath();

		context.beginPath();
		context.strokeStyle = "skyblue";
		context.rotate(45*Math.PI/180);
		context.lineTo(0,0);
		context.lineTo(100,0);
		context.stroke();
		context.closePath();
	}
</script>

效果如下

在这一段代码中不仅很好的体现出了旋转之后再绘制的问题,也可以很清楚的反映出了旋转中心(0,0)。
context.lineTo(0,0);context.lineTo(100,0);本来是一条水平的直线，但是受context.rotate(45*Math.PI/180);旋转45度之后的影响刚好处于灰色正方形的对角线之上。
但是在实际需求中我们常常需要以中心点为中心进行旋转该如何实现呢？这时便需要我们canvas的另一个操作方法translate
canvas之translate

<script type="text/javascript">
	window.onload = function(){
		var canvas = document.getElementsByTagName('canvas')[0];
		var context = canvas.getContext('2d');
		context.beginPath();
		context.fillStyle = "skyblue";
		context.rect(0,0,100,100);
		context.fill();
		context.translate(50,50);
		context.rect(0,0,100,100);
		context.fill();
		context.closePath();
	}
</script>

效果如下

context.translate(x,y);x水平偏移量,y垂直偏移量;
在做偏移操作时切记先偏移画布再进行绘画。
实现定点旋转代码(示例中心旋转)

<script type="text/javascript">
	window.onload = function(){
		var canvas = document.getElementsByTagName('canvas')[0];
		var context = canvas.getContext('2d');
		context.beginPath();
		context.fillStyle = "#ccc";
		context.rect(50,50,50,50);
		context.fill();
		context.closePath();

		context.beginPath();
		context.fillStyle = "skyblue";
		context.translate(75,75);
		context.rotate(45*Math.PI/180);
		context.translate(-75,-75);
		context.rect(50,50,50,50);
		context.fill();
		context.closePath();
	}
</script>

效果如下

原理
首先确定你需要的旋转中心的坐标,上诉例子中旋转中心为(75,75),然后通过context.translate(75,75);将画布向左向下偏移75,使画布(0,0)点移至旋转中心,然后旋转画布,使正方形放生旋转,最后再将画布通过context.translate(-75,-75);移动回原来的位置;
canvas之scale

<script type="text/javascript">
	window.onload = function(){
		var canvas = document.getElementsByTagName('canvas')[0];
		var context = canvas.getContext('2d');
		context.beginPath();
		context.fillStyle = "#ccc";
		context.rect(10,10,10,10);
		context.fill();
		context.closePath();
		context.beginPath();
		context.scale(2,2);
		context.fillStyle = "skyblue";
		context.rect(10,10,10,10);
		context.fill();
		context.closePath();
	}
</script>

效果如下

context.scale(x,y);x水平方向的缩放,y垂直方向的缩放
对绘图进行缩放，定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。