当前位置: > > > HTML5 - Canvas的使用样例5(变换的使用)

HTML5 - Canvas的使用样例5(变换的使用)

1,变换介绍
变换,就是一种通过变化<canvas>坐标系达到绘图目的的技术,具体有如下几种变换 :
(1)translate:平移变换
(2)scale:缩放变换
(3)rotate:旋转变换
(4)matrix:矩阵变换

2,平移变换(translate)
比如我们想要在三个地方绘制同样大小的正方形:

可以调用三次rect(),每次都传入不同的起点位置:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.lineWidth = 10;
context.strokeStyle = "#cd2828";

//在三个地方绘制同样大小(30*30)的正方形
context.rect(50, 50, 30, 30);
context.rect(100, 100, 30, 30);
context.rect(150, 150, 30, 30);

context.stroke();
也可以在同一个地方调用三次rect(),但每次都移动一下坐标系:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.lineWidth = 10;
context.strokeStyle = "#cd2828";

//在(50,50)点绘制正方形
context.rect(50, 50, 30, 30);

//把坐标系向下、向右各移动50像素
context.translate(50, 50)
context.rect(50, 50, 30, 30);

//把坐标系继续向下、向右各移动50像素(变换是可以累积的)
context.translate(50, 50)
context.rect(50, 50, 30, 30);

context.stroke();

2,旋转变换(rotate)
下面通过绘制一系列旋转的正方形,生成类似方形螺线的图案。
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.lineWidth = 4;
context.strokeStyle = "#cd2828";

//移动原点,接下来要围绕新原点旋转
context.translate(100, 100);

//绘制10个正方形
var copies = 10;
for(var i=1; i<copies; i++) {
	//绘制正方形之前,先旋转坐标系
	//旋转一周是2pi,因此每个正方形的旋转角度取决于要绘制的总数
	context.rotate(2 * Math.PI * 1/(copies-1));
	//绘制正方形
	context.rect(0, 0, 60, 60);
}

context.stroke();

4,坐标系的保存与还原
(1)调用绘图上下文的save()方法可以保存坐标系当前的状态。然后调用restore()方法可以返回保存过的前一个状态。 
(2)因为变换是累积的,我们在多步操作绘制复杂图形时,往往需要多次保存坐标系状态。如同浏览器历史记录一样,每次调用restore(),坐标系就会恢复到前一个最近的状态。
评论0