第165天：canvas绘制圆环旋转动画_小程序canvas circle loading连续旋转特效

4 5 使用Konva绘制圆环旋转动画 6 7 8 9 10

12

14 209 210

2，CircleText.js

 1 /**
 2  * Created by Administrator on 2018/2/1.
 3  */
 4 function CircleText(option){
 5     this._init(option);//构造函数默认执行初始化工作
 8 CircleText.prototype={
 9     _init:function(option){
10         this.x=option.x||0; //圆形组的中心点坐标
11         this.y=option.y||0;
12         this.innerRadius=option.innerRadius||0; //内圆半径
13         this.outerRadius=option.outerRadius||0;
14         this.text=option.text||'canvas';        //圆内的文字
15         this.innerStyle=option.innerStyle||'red'; //内圆的填充样式
16         this.outerStyle=option.outerStyle||'blue';//外圆的填充样式
18         //创建文字和圆形的一个组
19         this.group=new Konva.Group({
20             x:this.x,//设置组的x，y坐标后，所有的内部元素按照组内的新坐标系定位。
21             y:this.y
22         });
24         //初始化一个内部圆
25         var innerCircle=new Konva.Circle({ //创建一个圆
26             x:0,
27             y:0,
28             radius:this.innerRadius, //圆的半径
29             fill:this.innerStyle,    //圆的填充颜色
30             opacity:.8
31         });
32         //把内部圆，添加到组内
33         this.group.add(innerCircle);
35         //初始化一个圆环
36         var outerRing=new Konva.Ring({//初始化一个圆环
37             x:0,
38             y:0,
39             innerRadius:this.innerRadius,   //内圆的半径
40             outerRadius:this.outerRadius,   //外圆的半径
41             fill:this.outerStyle,           //圆环的填充的样式
42             opacity:.3                      //透明度
43         });
44         //把外环，添加到组内
45         this.group.add(outerRing);
47         //初始化一个文字
48         var text=new Konva.Text({
49             x:0-this.outerRadius,
50             y:-7,
51             width:this.outerRadius*2,   //文字的宽度
52             fill:'#fff',    //文字的颜色
53             text:this.text, //文字的内容
54             align:'center' , //居中显示
55             fontStyle: 'bold'//字体加粗
56         });
57         //把文字添加到组内
58         this.group.add(text);
59         },
61     //把 组添加到层或者其他组中。
62     addToGroupLayer:function(arg){
63         arg.add(this.group);
64     }
66     }

运行效果：

画布绘制圆环旋转动画 - 面向对象版1，HTML注意引入Konva.js库 1 &lt;!DOCTYPE html&gt; 2 &lt;html lang="en"&gt; 3 &lt;head&gt; 4 &lt;meta charset="UTF-8"&gt; 5 &lt;title&gt;使用Konva绘制圆环旋转动画&lt;/ti