这个时候如果我们直接旋转的话，正方形只为围绕 (0, 0) 位置旋转，并不会围绕正形的中心点 (150, 150) 做旋转。接下来，使用 ctx.translate() 方法，将画布原点 (0, 0) 平移到正方形的中心点位置处。这个时候 ctx.translate() 方法中的 x 和 y 对应的就是：

x + width / 2; y + height / 2;

也就是说 ctx.translate(x + width / 2; y + height / 2) 。这个时候绘制正方形，我们就不能再是 ctx.strokeRect(x, y, width, height) 了。因为我们将坐标移动了。为了将元素的中心点和坐标点在同一个地方，此时绘制正方形应该是 ctx.strokeRect(-width / 2, -height / 2, width, height) 。如下图所示：

那么要围绕元素中心旋转就很方便了，在绘制矩形之前，再使用 ctx.rotate() 方法。我们就可以得到这样的效果：

缩放Scaling

接着是坐标变换中的 缩放 。我们用它来增减图形在Canvas中的像素数目，对形状，位图进行缩小或者放大。

ctx.scale(x, y)

scale() 方法接受两个参数。 x 和 y 分别是横轴和纵轴的缩放因子。其缩放因子默认是 1 ，如果比 1 小是缩小，如果比 1 大则放大。

来看一个示例，将坐标系统放大两倍:

drawGrid(ctx, w, h, '#eee', 10); ctx.scale(2, 2); drawGrid(ctx, w, h, 'hsl(10,70%,80%)', 10);

效果如下：

前面我们介绍旋转的时候，配合 ctx.translate() 可以实现围绕元素的中心进行旋转，同样的，在这里也能实现元素围绕其中心进行缩放。

var x = 100; var y = 100; var width = 100; var height = 100; ctx.translate(x + width / 2, y + height / 2); ctx.scale(2, 2); ctx.strokeRect(width / 2, height / 2, width, height);

前面找元素中心位置看到的示例都是正方形的示例，那么对于任何形状的中心怎么来寻找呢？其实其他形状和正方形类似： 只要在缩放、旋转或者组合旋转缩放前将原点平移到形状的中心，都可以得到想要的效果。记住，任何形状的中心点都是半宽的 x 值和半高的 y 值。这需要使用边界框理论找到中心点。

坐标变换中的缩放可以用于实现很多不同的效果，比如说，在绘制了某个图形后，可以调用 ctx.scale(-1, 1) 来绘制其水平镜像或者调用 ctx.scale(1, -1) 来绘制其垂直镜像。如下所示：

ctx.save(); ctx.strokeStyle = '#f36'; ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(150, 150); ctx.lineTo(100, 200); ctx.closePath(); ctx.stroke(); ctx.translate(350, 0); ctx.strokeStyle = 'lime'; ctx.beginPath(); ctx.moveTo(-175, 0.5); ctx.lineTo(-175, 300.5); ctx.stroke(); ctx.scale(-1, 1); ctx.save(); ctx.strokeStyle = '#000'; ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(150, 150); ctx.lineTo(100, 200); ctx.closePath(); ctx.stroke();

上面的代码得到一个水平镜像的效果：

缩合示例

前面分别介绍了Canvas坐标变换中的移动、旋转和缩放。在实际使用当中，可以将这三者结合起来，可以帮助我们轻易实现需要的效果。比如下面这个效果，就是将三者结合在一起。

总结

这篇文章主要介绍了Canvas坐标系统中的坐标变换。Canvas坐标变换有 移动 、 旋转 和 缩放 。在实际中，将其结合在一起，可以帮助我们轻易需要的效果。

方法 描述

rotate(angle) 按照给定的角度来旋转坐标系， angle 是一个弧度值

scale(x, y) 在 x 和 y 方向上分别按照给定的数值来缩放坐标系，默认值是 1 ，小于 1 是缩小，反之是放大

translate(x, y) 将坐标平移到给定的 x 和 y 坐标处

分享给小伙伴们：

本文标签： Canvas/">Canvas

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻