我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。
教程介绍、教程目录等能在README里查阅。
引入
有时候,换种思路是可以简化问题的。
比如,当我们要在画布中心绘制n个几何图形时:
-
常规思考——我们要计算每个图形的中心位置并赋值给相应方法,并将每个位置根据图形的不同以不同的方法分别绘制。
-
简化思考——将坐标平移到画布中心,把所有中心点都当做(0,0)来处理,再分别绘制。
其实这里,我们就简化了中心点为(0,0),但极大地简化了在绘制其他图形时所需要的计算了。
介绍
在Canvas的绘图环境中,提供了坐标系的平移、缩放和旋转的方法。
方法 | 描述 |
---|---|
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)按照原来的方法绘制坐标轴即可得到镜面图像。