图片在线转换格式html5,HTML5 Canvas:图形转换

你可以对任何在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将跳出输入框,来对图形进行缩放。如果你看到的是一个滑块,可以使用鼠标来控制图形的缩放。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值