canvas基础之 konva框架简单应用 饼状图动画
整体思路
定义一些常量,数据 ,扇形半径,圆的半径, 舞台的搭建
创建一个画扇形的构造函数,该构造函数通过传入数据根并且据数据来进行画扇形和具体数据
在该构造函数可以定义三个组用来保存不同东西,扇形一个组 数字文字描述一个组 矩形区域也一个组
在该构造函数定义个绘制的函数 通过传入画布把里面定义的组放入画布中
通过扇形组进行遍历 定义一个变量来记录动画的所代表具体扇形,利用递归的方法让每一个扇形都由0到指定的角度
当最后一个扇形结束动画的时候结束递归就可以了
关键点
扇形的绘制 确定一个起点, 根据起来画扇形 每画一个扇形更新起点
文字的绘制 通过三角函数来确定位置 进行微调文字达到效果
通过一个变量来记录动画队列,注意结束递归.
上一篇
下一篇