html5有什么图像变换,HTML5 - Canvas的使用样例5（变换的使用）

1，变换介绍

变换，就是一种通过变化坐标系达到绘图目的的技术，具体有如下几种变换 ：

(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

//绘制正方形之前，先旋转坐标系

//旋转一周是2pi，因此每个正方形的旋转角度取决于要绘制的总数

context.rotate(2 * Math.PI * 1/(copies-1));

//绘制正方形

context.rect(0, 0, 60, 60);

}

context.stroke();

4，坐标系的保存与还原

(1)调用绘图上下文的save()方法可以保存坐标系当前的状态。然后调用restore()方法可以返回保存过的前一个状态。

(2)因为变换是累积的，我们在多步操作绘制复杂图形时，往往需要多次保存坐标系状态。如同浏览器历史记录一样，每次调用restore()，坐标系就会恢复到前一个最近的状态。