当前位置主页 > 资料库 > 前端教程 > HTML5 Canvas:图形转换

HTML5 Canvas:图形转换

2015-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);                                
                            

得到的结果如下图所示:

你的浏览器不支持HTML5 Canvas!
旋转

你也可以将绘制在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);                               
                            

得到的结果如下图所示:

你的浏览器不支持HTML5 Canvas!
绕不同的点进行旋转

正如上面提到的,所有的图形都将绕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);                                
                            

得到的结果如下所示:

你的浏览器不支持HTML5 Canvas!

这个例子首先将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);                                
                            

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

你的浏览器不支持HTML5 Canvas!

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

一个缩放图形的例子

在下面的例子中,在canvas中有4个矩形。我们可以通过滑块来控制矩形的缩放。

你的浏览器不支持HTML5 Canvas!

缩放级别:

如果在你的浏览器中,你看到的是一个输入框,你可以输入1-10,然后使用tab将跳出输入框,来对图形进行缩放。如果你看到的是一个滑块,可以使用鼠标来控制图形的缩放。

返回HTML5 Canvas教程目录
Previous:
上一篇:HTML5 Canvas:合成模式
Next:
下一篇:HTML5 Canvas:绘图状态和状态栈
返回顶部