html js 扇形统计图_HTML5绘制饼图实例（一）

HTML5 Demo

您的浏览器暂不支持Canvas

HTML仅仅定义显示的内容，如何画图还要借助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();

我们就在html文件中使用

之后的arc方法就是画圆的了。参数的含义为：前两个是圆心坐标，上面解释过了。第三个参数是半径大小，我们定义canvas的宽度为300像素，这里用半径就是300的一半，第四个参数是圆周起始位置，这就很有说头了，也涉及到一些几何知识，我们来看一张图：

0 PI就是起始位置了，沿顺时针路线，分别是0.5 PI(正下方)，1 PI和1.5 PI(正上方)，这个为我们以后画饼图提供了扇形范围的依据。

第五个参数是弧长，就是我们圆弧的范围，Math.PI*2就是整个圆了，Math.PI是半圆，这没什么好说的，完全的数学知识。第六个参数是个布尔值，就是确定是顺时针还是逆时针，这里false是顺时针。基础的内容就说完了，我们来看一下效果：