canvas基础之 konva框架简单应用 饼状图动画

canvas基础之 konva框架简单应用 饼状图动画_第1张图片


canvas基础之 konva框架简单应用 饼状图动画_第2张图片


canvas基础之 konva框架简单应用 饼状图动画_第3张图片


canvas基础之 konva框架简单应用 饼状图动画_第4张图片


canvas基础之 konva框架简单应用 饼状图动画_第5张图片


canvas基础之 konva框架简单应用 饼状图动画_第6张图片


canvas基础之 konva框架简单应用 饼状图动画_第7张图片


canvas基础之 konva框架简单应用 饼状图动画_第8张图片


canvas基础之 konva框架简单应用 饼状图动画_第9张图片


canvas基础之 konva框架简单应用 饼状图动画_第10张图片


canvas基础之 konva框架简单应用 饼状图动画_第11张图片



canvas基础之 konva框架简单应用 饼状图动画_第12张图片

整体思路

定义一些常量,数据 ,扇形半径,圆的半径, 舞台的搭建

创建一个画扇形的构造函数,该构造函数通过传入数据根并且据数据来进行画扇形和具体数据

在该构造函数可以定义三个组用来保存不同东西,扇形一个组  数字文字描述一个组  矩形区域也一个组 

在该构造函数定义个绘制的函数 通过传入画布把里面定义的组放入画布中  

通过扇形组进行遍历 定义一个变量来记录动画的所代表具体扇形,利用递归的方法让每一个扇形都由0到指定的角度

当最后一个扇形结束动画的时候结束递归就可以了 

关键点

扇形的绘制 确定一个起点, 根据起来画扇形  每画一个扇形更新起点  

文字的绘制 通过三角函数来确定位置 进行微调文字达到效果

通过一个变量来记录动画队列,注意结束递归.

你可能感兴趣的:(canvas基础之 konva框架简单应用 饼状图动画)