如何用html5 canvas 做饼图

html-css022

如何用html5 canvas 做饼图,第1张

html5 canvas 做饼图基本思路：

主要是利用HTML5 Canvas实现饼图绘制，绘制弧度的API主要是使用

context.arc与lineto两个API。

实现的功能有：

1. 支持标签Legend显示或者隐藏

2. 首次载入动画效果

3. 鼠标tooltip效果

4. 自定义饼图大小与是否添加文字

以前我们利用jQuery制作过一些图表应用，使用起来都非常方便。今天再来看一款基于HTML5Canvas的饼状图图表应用，鼠标点击饼状图的某块区域时，即可高亮突出显示该区域。由于该饼状图是基于HTML5开发的，所以需要支持HTML5的浏览器才能够使用。

用border-radius

你正圆的话，就设置半径就可以了，假如，你的图片是500X500

那css这样写：

img{border-radius:250px}就行了。