结构html:
添加输入框,输入一个数据回车添加一个
点击生成动态表格
添加canvas画布,所有绘制过程全部在画布中绘制
绘制js:
声明函数生成状图函数,统一调用
获取canvas对象
设置路径填充样式
设置计数变量,100次循环完成柱状图变化过程
设置定时器,循环数组,每次取1%值绘制对应矩形,当绘制到100次完成完整的矩形,将计数变量h的值控制在100,同时清除定时器
点击按钮触发生成图表的函数:
在输入框中添加值,回车添加进数组中:
声明变量data,将用户输入的值保存下来
用户输入值并回车存储值进data数组中
当有数据时,点击按钮即可
效果图:
