最近在公司接到一个仪表盘的需求，于是我就开始对仪表盘着手调查，如何利用 canvas 绘制一个仪表盘，由于之前没有 canvas 绘图的经验，所以我花了一个周末时间研究整个这个需求，最终完美复现了原型设计图，有点小小的成就感。
先放一张实现的最终效果图
分层分析
一个复杂的图形设计一定是分层的，无论是 HTML 还是 PS 的图层设计，一个好的分层设计会让该设计更加条理清晰。
那么，分层设计有什么优势呢？
- 开发人员可以只关注整个结构中的其中某一层
- 可以很容易的用新的实现来替换原有层次的实现
- 可以降低层与层之间的依赖
- 有利于标准化
- 利于各层逻辑的复用
所以如果想实现一个复杂仪表盘的设计，那么这个仪表盘一定是分层结构，结合整个设计图，我思索之后将仪表盘由底及高分层如下结构：
底盘
底盘的实现较为简单，固定一个中心点，绘制一个圆，并填充满颜色，代码如下
圆环
圆环的实现较为复杂，其中可以分解为四部分：圆弧、渐变色、终点的圆圈、分段
圆弧
1.指定圆弧宽度
2.指定圆弧边角
3.绘制半圆
渐变色
需要创建一个渐变色条，并将其填充到圆弧上
终点
终点部分实际上是三个圆叠加，底色圆红色，中间圆白色、顶层圆红色
分段
分段圆弧上的部分，简单来说就是继续绘制指定角度和长度的圆弧覆盖上
合并
将以上分步骤合并到一起
效果
将圆环和底盘绘制到一起
圆环圆锥
实现
圆锥圆环就是以圆心位置绘制指定角度和半径的圆，并填充白色
效果
将以上图层合并
箭头
箭头其实是花的时间最长的，一个箭头实际上是一个三角形，那么在改变角度的时候如何固定三角形的位置是个难题，多次尝试之后，我发现只需要已圆心为基准点，三角形底边的中心就是圆心，就可以算出三个角的位置信息。
效果
将以上图层结合
表盘
实现
表盘的实现较为简单，就是绘制两个圆，底层圆有阴影，顶层圆有边线
效果
文字
实现
效果
动画
难题
动画效果是比较难实现的一个流程，因为 canvas 绘图是静态绘图，如何将图片动起来是个难题。
我曾尝试过利用旋转将角度旋转，后来发现每旋转一次就会绘制一次，并不会清空上一次的内容，且新绘制的图层在其他图层之上，这就导致了三角形浮在所有图层之上。
想法
后来我想到了动画的原理，其实就是每一帧绘制一张新的图片，那我只要每一帧将图片擦除，再进行绘制，那么就是一个动态图片了。
实践
完成！
总结
其实实现一个仪表盘没有我想象中那么难，做一个事情之前能先分析好，每一步做什么，做好分层设计，一步一步实现。
我通过这次做仪表，也发现了许多我不了解的知识，我还要更加努力学习更多知识，打好基础，这样我才有信息迎接各种挑战。
