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 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用Konva绘制圆环旋转动画</ti
