×

HTML5 Canvas:图形转换

作者:Terry2016.09.27来源:Web前端之家浏览:14602评论:0
关键词:canvashtml5

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

61.png

  • 移动

  • 旋转

  • 缩放

移动

我们可以将绘制在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教程目录

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/Canvas1474905600992.html

网友评论文明上网理性发言 已有0人参与

发表评论: