HTML5 的 canvas 元素可通过 JavaScript 在网页绘制图形,它是一个矩形区域,支持对每个像素进行控制。本文将讲解如何利用它来绘制饼图。
1、 在HTML文件中,只需添加一个canvas标签,并设置其宽度和高度属性即可。
2、 接下来将详细讲解JavaScript的相关内容。
3、 画饼图的分块
4、 先绘制一个饼图的切片部分。
5、 准备CANVAS
6、 创建一个在页面加载完成后执行的draw函数,通过元素ID获取画布并绘制线条内容。
7、 画饼图的切片
8、 绘制饼图切片,需按步骤操作。
9、 将位置移动至横纵坐标均为200的点
10、 以点(200,200)为圆心,绘制半径120、角度为0.3π的圆弧。
11、 画线闭合饼图的切片部分
12、 代码见下
13、 你或许已发现,起始线会随弧的绘制自动连接起点,而闭合线则需要通过代码手动实现完成。
14、 制作整体饼状图
15、 从角度数组出发,确保总和为2π,依次绘制所有扇形切片。
16、 我们将加入颜色列表,为每个切片指定不同色彩。
17、 代码如下所示
18、 整体效果出色

