本文主要介绍用Html5饼图绘制统计图的方法，通过样例代码详细介绍，对大家的学习或工作有一定的参考学习价值。有需要的朋友可以和边肖一起学习。

Html5提供了强大的绘图API，让我们可以使用javascript轻松绘制各种图形。本文将主要说明用HTML5绘制饼图(统计图)的方法。先看饼图效果：

这个图是动态生成的，饼图是根据传入的比例参数(数组)动态绘制的。饼图的大小也是根据其高度动态调整的。

整个代码如下：

这个功能可以直接使用。如果你想让它变得更漂亮，你可以添加一些额外的美丽的图画。

这个代码最大的灵活性是将绘图参数和绘图代码分开，饼图的大小根据Canvas容器的高度自动调整。传递参数如下：

！声明文档类型

超文本标记语言

头

meta charset='utf-8 '

标题框架动画/标题

/head

身体

canvas id=' canvas ' width=' 400 ' height=' 300 '/canvas

div class=' '

button class=' start-BTN ' type=' button '再次吃东西/button

button class=' end-BTN ' type=' button '停止进食/button

button class=' pause-BTN ' type=' button '休息一下/button

按钮类='继续-BTN '类型='按钮'继续吃/按钮

/div

脚本类型='text/javascript '

const canvas=document . getelementbyid(' canvas ')

canvas.style.border='1px纯黑'

const ctx=canvas.getContext('2d ')

Const img=new Image() //创建图片对象

让定时器//定时器标识符

设毫秒=300 //执行时间间隔

设colIndex=0 //列数

设rowIndex=0 //行数

Const timerFun=()={//声明定时器执行函数

console . log(' set timer ')；

CTX.clearrect (0，0，canvas.style.width，canvas . style . height)//清除画布

If (rowIndex 3) {//如果是前5帧，

Ctx。drawimage (img，colindex * 240，rowindex * 240，200，200，50，50，200，200)//图片对象，x坐标，y坐标(注意：位于图片上的坐标)，宽度，高度(截取在图片上的大小)，x坐标，

ColIndex //下一帧

if (colIndex 4) {

colIndex=0

行索引

}

} else {

colIndex=0

rowIndex=0

}

}

img.onload=()={

定时器=设置时间间隔(定时器，毫秒)

}

img.src='image/apple.jpg '

const start BTN=document . GetElementsByclassname(' start-BTN ')[0]

const end BTN=document . GetElementsByclassname(' end-BTN ')[0]

const pauseBtn=document . getelementsbyclassname(' pause-BTN ')[0]