【绘制】HTML5 Canvas小项目：刻度仪表盘的绘制（图文）

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

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

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

介绍

圆弧，尤其是圆，通常被描绘一些实物，接下来我们来说一下圆形的仪表盘的实现。如图所示应用程序实现了用5个圆形实现一个仪表盘，仪表盘上的刻度代表圆周上的角刻度。

技术基础

应用程序使用了本章到目前为止所讲的很多技术。比如，画了很多线段和圆形；使用了各种颜色和透明度；对圆形路径进行描边和填充；同时为了使仪表盘外围你看起来有深度感，还是用了阴影效果； 使用了“非零环绕规则”实现剪纸效果……

实现思路

其实整体实现的逻辑并不难，无非是在第一章钟表教程的基础上上了样式和细节优化，比如说半透明化和阴影化表外环等等，又比如说这个仪表盘数字并非是我们在给定数组中抽取的，而是根据角度算出来的。

值得注意的是，在代码初始化的时候,设置了textAlign和textBaseline的属性，目的是为了让应用程序很容易计算出绘制文本的位置：

context.textAlign='center';
context.textBaseline='middle';

textAlign，设置文本在水平方向上的对其方式

textBaseline，设置文本在垂直方向上的对其方式

所以上述两行代码表示，水平和垂直居中在当前路径点

在线演示 详细代码 

带刻度的仪表盘

 目前这个仪表盘没有添加Event，后面的教程我们会以这个仪表盘为基础，创建一个交互应用：用户可以通过它来交互式地旋转多边形物体。