HTML5 Canvas：图形转换

07-24 次

你可以对任何在HTML5 canvas中绘制的图形应用转换效果。下面是可以使用的转换列表：

移动
旋转
缩放

移动

我们可以将绘制在canvas上的任何图形进行移动操作。移动意味着要重新定位绘制的图形。下面是一个示例代码：

var x = 100;
var y =  50;
context.translate(x, y);

上面的代码将canvas中已经绘制的所有元素在水平方向上移动100，在垂直方向上移动50。

注意：移动操作仅仅对那些在translate()函数被调用之后才绘制的图形有效果，之前绘制的图形是不会移动的。

下面是另一个例子。两个矩形被绘制于同样的坐标系，长度和宽度也相等。但是其中一个绘制在translate()函数之前，另一个绘制在translate()函数之后。来看看效果：

context.fillStyle = "#f62459";
context.fillRect(10,10, 100, 100);

context.translate(50, 25);

context.fillStyle = "#4183d7";
context.fillRect(10,10, 100, 100);

得到的结果如下图所示：

旋转

你也可以将绘制在canvas上的元素进行旋转。旋转操作可以通过2D上下文的rotate()函数来完成。

context.rotate(radians);

旋转的角度作为参数传递到rotate()函数中。这个角度必须是一个弧度值，而不能是角度值。

所有的旋转图形都将绕canvas的(0,0)坐标点旋转，这是canvas的左上角位置。

和移动操作相同，所有绘制在rotate()函数之后的图形都会被旋转。

下面的例子绘制了两个相同的矩形，一个绘制在rotate()函数之前，一个绘制在rotate()函数之后。

context.fillStyle = "#f62459";
context.fillRect(60,20, 100, 100);

context.rotate( (Math.PI / 180) * 25);  //旋转25度

context.fillStyle = "#4183d7";
context.fillRect(60,20, 100, 100);

得到的结果如下图所示：

绕不同的点进行旋转

正如上面提到的，所有的图形都将绕canvas的左上角进行旋转。如果我们想要图形绕其它位置进行旋转，该怎么办呢？例如，我们需要图形绕自己的中心点进行旋转。

为了使图形绕自己的中心点进行旋转，你必须首先将canvas移动到图形的中心点，然后执行旋转操作，再将canvas移动回(0,0)位置，再绘制图形。

下面的代码演示了图形如何绕自己的中心点进行旋转。

var x      = 10;
var y      = 10;
var width  = 100;
var height = 100
var cx     = x + 0.5 * width;   // 图形的X轴中心
var cy     = y + 0.5 * height;  // 图形的Y轴中心

context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);  //绘制正常的图形

context.translate(cx, cy);              //移动到图形的中心
context.rotate( (Math.PI / 180) * 25);  //旋转25度
context.translate(-cx, -cy);            //将中心点移动回(0,0)

context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);

得到的结果如下所示：

这个例子首先将canvas的旋转点移动到矩形的中心(cx, cy)，然后旋转canvas 25度，再接着将canvas的旋转点移动回(0,0)位置。现在，canvas绕(cx,cy)旋转了25度。这时所有绘制的东西都将绕(cx,cy)旋转25度。因此，接下来绘制的矩形也会绕(cx,cy)旋转25度。

注意，矩形的坐标系统并没有改变，你可以看到红色和蓝色的矩形的fillRect方法使用的是相同的参数。这里仅仅是转换操作使两个矩形位于不同的位置和旋转角度。

缩放

我们还可以实现将绘制在HTML5 canavs中的图形自动进行缩放。

在进行缩放的时候，x轴和y轴的坐标系统会按一定比例进行缩放。这个缩放比例可以通过scale()函数来设置。例如：

var scaleX = 2;
var scaleY = 2;
context.scale(scaleX, scaleY);

这个例子将X轴和Y轴的坐标系统都放大2倍。

和translate()和rotate()函数相同，所有在scale()函数被调用之后绘制的图形才会被缩放。来看下面的例子：

var x      = 10;
var y      = 10;
var width  = 100;
var height = 100

context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);

context.scale(2,2);

context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);

上面的代码得到的结果如下：

现在，蓝色的矩形被放大了2倍。注意观察，蓝色的矩形距离canvas左上角(0,0)位置的距离也被放大了2倍。这是因为蓝色矩形的所有坐标系都被放大了2倍。如果你不想在缩放图形的时候使它移动，你要在缩放的同时还要对它进行移动操作。