canvas画饼状图

首先代码并不是原创。
然后，准备弄一个根据数据库创建图表的框架，所以自己现在网上学了一点，先做个饼状图来看看：
<script type="text/javascript" language="javascript">
//设置几个全局变量 计数，概率名数组，概率大小数组，还有分类颜色数组
var DataNum = 0;
var data_arr = new Array();//
var text_arr = new Array();
var color_arr = new Array();
var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400","#FF0000"];//颜色可以多弄几个但是我懒得弄

function run(){ //执行画图方法
drawCircle("canvas_circle");
}
function drawCircle(canvasId){ //画饼状图的方法
data_arr = new Array();
text_arr = new Array();//每次执行都要初始化数据
if(DataNum == 0){
alert("无数据");
return;
}
else{
var j=parseFloat(0);
for(var i = 0; i < DataNum; i++){ //动态添加
data_arr[i] = document.getElementById("data_arr"+i).value; //数据
text_arr[i] = document.getElementById("text_arr"+i).value; //数据名称
j=parseFloat(j)+parseFloat(data_arr[i]); //相加的时候强制转换成浮点型，否知直接字符相加
}
if(j!=1){alert("输入比例不为1,请输入正确的比例");return;}
}

var c = document.getElementById(canvasId); //获取canvas对象
var ctx = c.getContext("2d");
alert("ss");
ctx.clearRect(0,0,500,500);
var radius = c.height /2-20; //半径
var ox = radius +20, oy = radius +20; //圆心
var width = 30, height = 10; //图例宽和高
var posX = ox * 2 + 20, posY = 30; //
var textX = posX + width + 5, textY = posY + 10;

var startAngle = 0; //起始弧度
var endAngle = 0; //结束弧度
for (var i = 0; i < data_arr.length; i++)
{
//绘制饼图
endAngle = endAngle + data_arr[i] * Math.PI * 2; //结束弧度
ctx.fillStyle = color_arr[i]; //选择颜色
ctx.beginPath();
ctx.moveTo(ox, oy); //移动到到圆心
ctx.arc(ox, oy, radius, startAngle, endAngle, false);
ctx.closePath();
ctx.fill();
startAngle = endAngle; //设置起始弧度

//绘制比例图及文字
ctx.fillStyle = color_arr[i];
ctx.fillRect(posX, posY + 20 * i, width, height);
ctx.moveTo(posX, posY + 20 * i);
ctx.font = 'bold 12px 微软雅黑'; //斜体 30像素 微软雅黑字体
ctx.fillStyle = color_arr[i]; //"#000000";
var percent = text_arr[i] + "：" + 100 * data_arr[i] + "%";
ctx.fillText(percent, textX, textY + 20 * i);
}

}
function add(){ //添加数据
var new1 = dataInput.insertRow();
var new11 = new1.insertCell();
var new12 = new1.insertCell();
new11.innerHTML ="数据名：<input type='text' size='10'id='text_arr"+DataNum+"'/>";
new12.innerHTML ="百分比：<input type='text' size='10'id='data_arr"+DataNum+"'/>";
DataNum++;
}

//页面加载时执行init()函数
// window.onload = init;
</script>
就这些，先记着，也许以后有用。
下面是HTML5代码
<canvas id="canvas_circle" width="500" height="300">
浏览器不支持canvas
</canvas>