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

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

推荐文章

焦虑的针织衫 · 我们从`reportlab.pdfgen`模块中导入了`canvas`。这个模块提供了创建PDF文件所需的基本功能。-阿里云开发者社区

3 周前

风流倜傥的玉米 · Android Drawable 转化成 Bitmap-阿里云开发者社区

2 周前

爱热闹的海龟 · C#实现十六进制和十进制相互转换【及不同进制表示】-阿里云开发者社区

1 月前

大气的电池 · 记录和分析工作簿性能 - Tableau

1 年前

愤怒的骆驼 · python OpenCV图像金字塔_python_脚本之家

1 年前

爱笑的猴子 · 解决：IDEA导入svn项目报Can't use Subversion command line client:svn_姜姜好呢的博客-CSDN博客

1 年前

多情的芒果 · 数据结构有了列表，为什么还需要元组这样的类型呢？_要以元组的方式出现为什么要输入列表_威小以的博客-CSDN博客

1 年前