如何用canvas绘制饼图

1、HTML

在HTML文件中，我将物英此简单地插入一个"<canvas>"元素并指定宽度和高度鬼匠。

2、以下步骤将介肥新绍JavaScript部分。

1、绘制饼图切片

让我们先开始绘制一个饼图切片。

2、CANVAS准备

让我们创建一个将在window.onload上执行的draw()函数。 然后我们可以通过它的id检索我们的画布并创建我们的内容。内容是绘制线条。

3、绘制饼图切片

要画一个饼切片，我们将：

(1)移动到（200，200）坐标

(2)开始绘制一个120半径的圆弧，中心为（200，200），角度为0.3 PI

(3)绘制一条线以关闭饼图切片

代码如下:

4、您可能已经意识到，初始线是自动绘制的：当我们开始绘制弧时，路径将从初始位置自动连接。但封闭线由代码完成。

1、绘制整体饼图

我们将从角度数组开始，其中和等于2PI并绘制所有切片。

我们还将添加一个颜色列表，为每个切片填充颜色。

2、代码如下:

3、整体效果: