html5canvas绘图刻度仪表盘的绘制zxmeigood

圆弧，尤其是圆，通常被用做描绘一些实物。下图所示的应用程序用5个圆形实现了一个仪表盘。仪表盘的刻度代表了圆周上的角度值。用户可以通过它来交互式地旋转多边形物体。

该应用程序使用了本章到目前为止所讲的很多技术。为了绘制这个仪表盘，该应用程序画了许多圆形与线段，使用了各种颜色及透明度，对圆形路径进行了描边与填充。同时为了使盘面上的刻度看起来有深度感，它还运用了阴影效果。该程序还运用了剪纸效果。使得仪表盘外围的那一圈看起来有半透明的效果。

仪表盘的绘制

html代码：

12342021222324Canvasnotsupported2526272829example.js

该应用程序使用了绘制剪纸效果的技巧，来让表盘背景看起来有些透明。代码调用了arc()方法，按照顺时针方向来绘制外围的圆形，且按照逆时针方向来绘制里面的圆形。在这种情况下，为了做出剪纸的效果，应用程序并没有在第二次调用arc()方法之前先调用beginPath()方法。

第二个要注意的是，save()方法与restore()方法之间的那段代码，对绘图环境对象的某些属性做了一个临时性的修改，例如strokeStyle与fillStyle()等。通过Canvas绘图环境的save()与restrore()方法，你可以实现各自独立且互不干扰的绘图函数来。

最后，请注意应用程序是如何绘制仪表盘周围文字的。先把绘图环境对象的textAlign与textBaseline属性分别设置为center与middle，这样的话，应用程序就可以很容易地计算出绘制文本的位置了。