前几天项目GIS部分一个功能模块需要一个控制仪表盘，虽然之前看过canvas作图，但是没怎么具体用过。今天就这个功能模块研究了下canvas。

什么是 Canvas？

　　canvas 元素用于在网页上绘制图形。<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器），必须使用脚本来完成实际的绘图任务，通常是用JavaScript在网页上绘制图像。canvas所在画布是一个矩形区域，我们可以控制画布的每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。一句话说完，功能很强大，需要研究的东西很多！

创建 Canvas 元素

　　在 HTML5 页面添加 canvas 元素。规定元素的 id、和宽高：

　　Canvas 对象表示一个 HTML 画布元素 - 。它没有自己的行为，但是定义了一个 很多API 支持脚本化客户端绘图操作。

Canvas 对象的属性

　　height 属性

　　　　画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

　　width 属性

　　　　画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

 

具体的实验代码如下，效果可直接执行代码测试：所有的注释都写在了代码里面，故不另行做注释

效果图如下：(中间显示值表示当前弧形占比。值为0~100)