本文主要介绍用Html5饼状图绘制和实现统计图的方法。通过示例代码进行了非常详细的介绍，对大家的学习或工作都有一定的参考价值。有需要的朋友下面跟边肖学习。
Html5提供了一个强大的绘图API，使我们能够用javascript轻松绘制各种图形。本文将主要讲解用HTML5绘制饼图(统计图)的方法。先来看看饼状图效果：
这个图是动态生成的，饼图是根据传入的刻度参数(数组)动态绘制的。饼图的大小也会根据高度动态调整。
所有代码如下：
这个功能可以直接使用。如果你想让它更漂亮，你可以添加一些额外的漂亮的图纸。
这段代码最大的灵活性就是将绘图参数从绘图代码中分离出来，饼状图大小根据画布容器的高度自动调整。参数传递如下：
！声明文档类型
超文本标记语言
头
meta charset=’utf-8 ‘
标题帧动画/标题
/头
身体
canvas id=’canvas ‘宽度=’400 ‘高度=’300’/canvas
div class=’ ‘
‘开始-BTN ‘类型=’按钮’再吃一次/按钮
button class=’ end-BTN ‘ type=’ button ‘不要吃/button
暂停-BTN休息一下/按钮
继续-BTN继续吃
/div
脚本类型=’文本/javascript ‘
const canvas=document . getelementbyid(‘ canvas ‘)
canvas.style.border=’1px纯黑’
const ctx=canvas.getContext(‘2d ‘)
Const img=new Image() //创建图片对象
定时器//定时器标识符
设毫秒=300 //执行间隔
colinex=0//列数
设rowIndex=0 //行数
Const timerFun=()={//声明定时器执行函数
Console.log(‘设置计时器’)；
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
行索引
}
}否则{
colIndex=0
rowIndex=0
}
}
img.onload=()={
timer=setInterval(timerFun，毫秒)
}
img.src=’image/apple.jpg ‘
const start BTN=document . getelementsbyclassname(‘ start-BTN ‘)[0]
const end BTN=document . getelementsbyclassname(‘ end-BTN ‘)[0]
const pause BTN=document . getelementsbyclassname(‘ pause-BTN ‘)[0]
const continue BTN=document . getelementsbyclassname(‘ continue-BTN ‘)[0]
startbtn . addevent listener(‘ click ‘，()={
Console.log(‘点击开始’，计时器)
清除时间间隔(定时器)
ColIndex=0 //列数
RowIndex=0 //行数
timer=setInterval(timerFun，毫秒)
})
endBtn.addEventListener(‘click ‘，()={
Console.log(‘点击结束’，计时器)
清除时间间隔(定时器)
colIndex=0
rowIndex=0
ctx.drawImage(img，colIndex * 240，rowIndex * 240，200，200，50，50，200，200)
定时器=0
})
pause BTN . addevent listener(‘ click ‘，()={
Console.log(‘点击暂停’，计时器)
清除时间间隔(定时器)
定时器=0
})
continue BTN . addevent listener(‘ click ‘，()={
if(计时器){
Alert(‘吃吧，别着急’)
返回
}
Console.log(‘单击继续’，计时器)
timer=setInterval(timerFun，毫秒)
})
/脚本
/body
/html
关于Html5饼状图的绘制方法实现统计图的这篇文章到此为止。更多相关Html5饼状图，请搜索脚本之家之前的文章或者继续浏览下面的相关文章。希望大家以后多多支持剧本之家！
来源：剧本之家
链接：https://www.jb51.net/html5/739046.html
