HTML5 rotate 做仪表盘

我们的项目中有关于数据仓库和挖掘，用户要求UI的界面需要仪表盘，我网上找了下，没有发现免费的HTML仪表盘，饼图啥图表的确很多，那就没有办法了，我和同事自己做了一个仪表盘，结果如下。
之后我们就来讨论下这个简单的仪表盘是怎么做的。我们先大致有一个想法，设定一个宽高2:1的canvas，仪表盘的半径就是canvas的高度，仪表盘需要的数据有上面分几个区域（一般是低中高三个区域，为了测试我们准备了四个区域），刻度线和文字，指针，和指针指向的值。
首先第一步自然是canvas的声明

<body>
<div>
<canvas id="board" width="800" height="600">
</canvas>
</div>
</body>
</html>

之后的工作都在javascript中完成，我们需要定义一些对象

//仪表盘面板
var panel = function（id, option） {
this.canvas = document.getElementById（id）; //获取canvas元素
this.cvs = this.canvas.getContext（"2d"）; //得到绘制上下文
this.width = this.canvas.width; //对象宽度
this.height = this.canvas.height; //对象高度
this.level = option.level;
this.outsideStyle = option.outsideStyle;
}

这个panel就是我们的仪表盘对象，参数的id是canvas元素，option是我们需要提交给仪表盘的一些参数值。这个option的定义如下：option对象可以扩展，你可以通过optin定制更加自由强大的仪表盘对象的。

var panelOption = {
maxLength: 30,
interval: 5,
level: [//仪表盘需要呈现的数据隔离区域
{start: 0, color: "red" },
{ start: 30, color: "yellow" },
{ start: 40, color: "blue" },
{ start: 100, color: "Lime" }
],
outsideStyle: { lineWidth: 4, color: "rgba（100,100,100,1）" }
};

在绘制元素的时候，我们常常需要保存和恢复现场，特别当我们使用转移，旋转等方法的时候，一定要记得先save最后restore。为了方便，我们编写了一个save函数提供这个方式，这个模式类似C#中的委托，和设计模式中的观察着模式

panel.prototype.save = function（fn） {
this.cvs.save（）;
fn（）;
this.cvs.restore（）;
}

上面这个save可以方便的帮助我们保存和回复现场。我们定义个用于画半圆的方法，这个方法中，我们将需要画半圆时做的translate放到save函数中，这样画半圆的变形操作不会对其他操作有影响。

panel.prototype.drawArc = function（） {
var p = this;
var cvs = this.cvs;
p.save（function（） {
cvs.translate（p.width / 2, p.height）; //将坐标点移到矩形的底部的中间
cvs.beginPath（）;
cvs.lineWidth = p.outsideStyle.lineWidth;
cvs.strokeStyle = p.outsideStyle.color;
cvs.arc（0, 0, p.height - cvs.lineWidth, 0, Math.PI / 180 * 180, true）; //画半圆
cvs.stroke（）;
}）;
}

然后我们绘制中间颜色的填充区域

panel.prototype.drawLevelArea = function（level） {
var p = this;
var cvs = this.cvs;
for （var i = 0; i < level.length; i++） {
p.save（function（） {
cvs.translate（p.width / 2, p.height）;
cvs.rotate（Math.PI / 180 * level[i].start）;
p.save（function（） {
cvs.beginPath（）;
cvs.arc（0, 0, p.height - p.outsideStyle.lineWidth, Math.PI / 180 * 180, Math.PI / 180 * 360）;
cvs.fillStyle = level[i].color;
cvs.fill（）;
}）;
}）;
}
}