【绘制】HTML5 Canvas坐标变换——坐标系的平移(translate)、缩放(scale)、旋转(rotate)、镜像。（图文、代码）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

引入

有时候，换种思路是可以简化问题的。

比如，当我们要在画布中心绘制n个几何图形时：

• 常规思考——我们要计算每个图形的中心位置并赋值给相应方法，并将每个位置根据图形的不同以不同的方法分别绘制。

• 简化思考——将坐标平移到画布中心，把所有中心点都当做(0,0)来处理，再分别绘制。

其实这里，我们就简化了中心点为(0,0)，但极大地简化了在绘制其他图形时所需要的计算了。

介绍

在Canvas的绘图环境中，提供了坐标系的平移、缩放和旋转的方法。

CanvasRenderingContext2D对象中旋转、缩放和平移坐标系的方法

方法	描述
rotate(double angleInRadians)	按照给定的弧度旋转坐标系。（注意，π弧度等于180角度）
scale(double x,double y)	在X和Y方向上分别按照给定的数值进行缩放坐标系
translate(double x,double y)	将坐标系平移到给定的X、Y坐标处

为了更加形象地理解，我们以绘制坐标轴的小节为基础，分别演示旋转、缩放和平移。为了演示方便，我们为下面变更的canvas标签添加了黑色边框。

旋转

rotate只传入顺时针旋转的弧度，如π/8就是22.5度。在初始化之前，添加一句代码：

context.rotate(-Math.PI/8);

在线演示 详细代码

我们可以发现，实际上坐标轴的旋转其实就意为着整个坐标轴的旋转， 因为后续路径的位置也都是根据坐标来判定的。

缩放

scale(2,2)就意味着横坐标和纵坐标都同时放大2倍。 在初始化之前，添加一句代码：

context.scale(2,2);

在线演示 详细代码

这里的确按照我们想要的2倍放大了，但原点坐标被隐藏到了下面，如果此时我们想得到原点的图像，那么就需要我们配合平移来实现了。

平移

translate(30，30)意味着我们将坐标轴原点平移到了(30,30)的位置，换句话说，将整个画布图像沿着(0,0)到(30,30)方向移动了。 在初始化之前，添加一句代码：

context.translate(30,30);

在线演示 详细代码

坐标轴被平移了，由于canvas宽高限制，目前坐标轴只能展示出这个范围。 

镜像

其实镜像的实现，canvas并没有提供API，但可以通过scale实现镜像的效果。比如说，在绘制了某个图形后，可以调用scale(1,-1)来绘制水平镜像，或者调用scale(-1,1)来绘制垂直镜像。 

在线演示 详细代码

这里就以画布的x=canvas.width/2处为镜面实现镜像效果。

 drawGrid('lightgray', 10, 10);
    drawAxis();
    context.translate(canvas.width,0);
    context.scale(-1,1);
    drawAxis();

上面这段代码先调用了drawAxis()绘制原坐标轴，再将原点平移到canvas的右边界，然后调用scale(-1,1)按照原来的方法绘制坐标轴即可得到镜面图像。