微信二维码
微博二维码
qq号二维码

canvas绘制柱状图

夏磊银 2020.07.29 24人浏览
canvas绘制柱状图

结构html:

添加输入框,输入一个数据回车添加一个

canvas绘制柱状图

点击生成动态表格

canvas绘制柱状图

添加canvas画布,所有绘制过程全部在画布中绘制

canvas绘制柱状图

绘制js:

声明函数生成状图函数,统一调用

canvas绘制柱状图

获取canvas对象

canvas绘制柱状图

设置路径填充样式

canvas绘制柱状图

设置计数变量,100次循环完成柱状图变化过程

canvas绘制柱状图

设置定时器,循环数组,每次取1%值绘制对应矩形,当绘制到100次完成完整的矩形,将计数变量h的值控制在100,同时清除定时器

canvas绘制柱状图

点击按钮触发生成图表的函数:

canvas绘制柱状图


在输入框中添加值,回车添加进数组中:

声明变量data,将用户输入的值保存下来

canvas绘制柱状图

用户输入值并回车存储值进data数组中

canvas绘制柱状图


当有数据时,点击按钮即可

canvas绘制柱状图


效果图:

canvas绘制柱状图

分享到:
微信小程序之wx.uploadFile
  • 2019.11.30
  • 新手做简历时,容易犯哪些错误
  • 2020.08.15