用 scale 打造自由缩放的 canvas 画布

虽然本身是一枚前端数据可视化工程师，但是说实话，由于本身从事这一行的时间并不长，因此对于一些基础的知识，了解的其实并不透彻，也就是俗话说的，知其然不知其所以然吧。

目前，对于前端的数据可视化来说，主要有三种不同的方向吧，分别是canvas 2d，canvas 3d webgl 以及 svg。这三种方式各有优劣吧，对于不同的场景，相互配合起来，才能发挥最大的作用。

因此对于一个前端数据可视化工程师来说，想要干得好，其实并不容易。

所以说，任重而道远吧，但是如果真心热爱这个行业，其实做出东西的时候，其实是很有成就感的。

当初之所以选择前端工程师这个行业，就是因为相对于后端来说，它更加的“所见即所得”。

我想每一个前端工程师都是从写页面开始的吧，俗称“切图仔”。切图其实并没有想象中的那么容易，特别是一些细节的部分，也需要多多琢磨，才能将页面写的更有艺术性。

当初误打误撞，进入了前端数据可视化领域，这个领域相对来说更小众些。但是后来发现对于我个人来说，我会感觉这个比普通的写页面工作更有意思，通过 canvas，给前端页面插上想象的翅膀，做出各种炫酷的效果。

废话不多说，返回这篇文章的主旨吧。

今天主要想聊聊 CanvasRenderingContext2D.scale() 这个 api，这个 api 其实以前用的不太多，但是今天自己研究的时候，忽然明白过来，这个 api 其实很有用，用来整体放缩 canvas 画布，配合鼠标的滚轮，我们就能做一个任意缩放的无限大的一个画布。

当然࿰