HTML5绘图饼图示例（1）

HTML5引入了Canvas元素，该元素用于绘制图形. 我们可以绘制可能需要仅基于HTML和JavaScript的第三方组件的图形. 因为有更多的数据统计信息，所以以饼图为例进行说明. 在绘制饼图之前，您可以使用JfreeChart组件，也可以使用Flash组件FusionCharts Free和Open Flash Chart，这些组件的使用之前也已经介绍过，您可以参考上一篇文章. 本节仅介绍HTML5 Canvas绘图饼图.

饼图的基础是原型，因此让我们看一下如何使用Canvas绘制原型. 当然，这很简单，首先编写HTML代码，如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5 Demo</title>
</head>
<body>
	<canvas id="circle" width="400" height="300">您的浏览器暂不支持Canvas</canvas>
</body>
</html>

HTML仅定义显示的内容. 如何绘制图片也需要JavaScript，这也非常简单. 让我们看一下:

<script type="text/javascript">
function drawCircle(){
	var canvas = document.getElementById("circle");
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = '#77D1F6';
	ctx.beginPath();
	ctx.moveTo(200,150);
	ctx.arc(200,150,150,0,Math.PI*2,false);
	ctx.fill();
}
drawCircle();
</script>

我们只使用