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张图片


整体思路

利用面向对象思想 创建一个专门用来画小球的构造函数

里面定义一个绘制的方法   在onload里面创建 这个构造函数的实例化对象

并且作相应的设定   最后拿到数组里面的小球对象进行运动

关键点  

框架的运用 舞台的创建 画布的创建 各种数组的创建 

顺序  舞台>画布>组  把对象放入对应的组 把组放入对应的画布  把画布放入舞台 

计算各个小球的位置 也就是圆心 通过三角函数可以求得各个对象在内圆和外圆所在的位置,并且不会脱离内圆和外圆

实现类似8大行星绕着运动效果 

你可能感兴趣的:(canvas基础之 konva框架简单应用 炫酷的中心圆转动)