第165天：canvas绘制圆环旋转动画

半指温柔乐

发布于 2018-09-11 09:53:59

2.4K0

发布于 2018-09-11 09:53:59

文章被收录于专栏：前端知识分享

canvas绘制圆环旋转动画——面向对象版

1、HTML

注意引入Konva.js库

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4    <meta charset="UTF-8">
  5    <title>使用Konva绘制圆环旋转动画</title>
  6    <script src="konva/konva.min.js"></script>
  7    <script src="CircleText.js"></script>
  8 </head>
  9 <body>
 10 <div id="container">
 11 
 12 </div>
 13 
 14 <script>
 15    //创建舞台
 16    var stage=new Konva.Stage({
 17       container:'container',
 18       width:window.innerWidth,//全屏
 19       height:window.innerHeight
 20 
 21    });
 22 
 23    //创建层
 24 
 25    //中心点坐标
 26    var cenX=stage.width()/2;
 27    var cenY=stage.height()/2;
 28 
 29    //创建背景层
 30    var bgLayer=new Konva.Layer();
 31    stage.add(bgLayer);
 32 
 33    //绘制背景
 34    var innerRadius=252/2;//内环的半径
 35    var outerRadius=220;//外环的半径
 36 
 37    // 创建背景内环虚线圆
 38    var innercircle=new Konva.Circle({
 39       x:cenX,
 40       y:cenY,
 41       radius:innerRadius,
 42       stroke:"#C1C1C1", //注意是stroke 不是strokeStyle
 43       strokeWidth:3,
 44       dash:[10,4] //dash设置虚线 10实线 4空
 45    });
 46    //把 内环虚线圆添加到背景层中
 47    bgLayer.add(innercircle);
 48 
 49    //创建背景的外环的虚线圆
 50    var outercircle=new Konva.Circle({
 51       x:cenX,
 52       y:cenY,
 53       radius:outerRadius,
 54       stroke:"#C1C1C1", //注意是stroke 不是strokeStyle
 55       strokeWidth:3,
 56       dash:[10,4] //dash设置虚线 10实线 4空
 57    });
 58    //把外虚线圆，添加到层中。
 59    bgLayer.add(outercircle);
 60 
 61 
 62    //把中心圆形添加到层中
 63    var cenCircleText=new CircleText({
 64       x:cenX,
 65       y:cenY,
 66       innerRadius:132/2,
 67       outerRadius:90,
 68       text:'Web全栈',
 69       innerStyle:'#525A82',
 70       outerStyle:'#E1E1E1'
 71    });
 72 
 73    cenCircleText.addToGroupLayer(bgLayer);
 74    bgLayer.draw();//渲染层
 75 
 76    //动画层的绘制
 77    var animateLayer=new Konva.Layer();
 78    stage.add(animateLayer);
 79 
 80    //创建2环的组
 81    var Group2=new Konva.Group({
 82       x:cenX,//组内的 x，y坐标。
 83       y:cenY
 84    });
 85 
 86    //添加2环的圆
 87    //2环上的 CSS3形状组
 88    var CircleText_CSS3=new CircleText({
 89       x:innerRadius*Math.cos(30*Math.PI/180),//圆的x,y坐标
 90       y:innerRadius*Math.sin(30*Math.PI/180),
 91       innerRadius:30,   //内圆半径
 92       outerRadius:40,   //外圆的半径
 93       innerStyle:'yellow', //内圆填充的颜色
 94       outerStyle:'#E1E1E1',   //外圆环填充的颜色
 95       text:'CSS3'
 96    });
 97    CircleText_CSS3.addToGroupLayer(Group2);
 98 
 99    //添加2环的圆
100    //2环上HTML5的圆形组
101    var CircleText_HTML5=new CircleText({
102       x:innerRadius*Math.cos(240*Math.PI/180),//文本圆的x坐标
103       y:innerRadius*Math.sin(240*Math.PI/180),//文本圆的y坐标
104       innerRadius:30,         // 内圆半径
105       outerRadius:40,         // 外圆半径
106       innerStyle:'orange',    //内部填充样式
107       outerStyle:'#E1E1E1',   //外圆的样式
108       text:'HTML5'            // 内圆的文本
109    });
110    CircleText_HTML5.addToGroupLayer(Group2);
111 
112    //添加2环的圆
113    //2环上js的圆形组
114    var CircleText_js=new CircleText({
115       x:innerRadius*Math.cos(150*Math.PI/180),
116       y:innerRadius*Math.sin(150*Math.PI/180),
117       innerRadius:35,
118       outerRadius:45,
119       innerStyle:'green',
120       outerStyle:'#E1E1E1',
121       text:'Javascript'
122    });
123    CircleText_js.addToGroupLayer(Group2);
124 
125    animateLayer.add(Group2);//第二层的组添加到层上
126 
127    //创建3环的的组
128    var Group3=new Konva.Group({
129       x:cenX,
130       y:cenY
131    });
132    //绘制3环圆
133    var CircleText_vue=new CircleText({
134       x:outerRadius*Math.cos(90*Math.PI/180),
135       y:outerRadius*Math.sin(90*Math.PI/180),
136       innerRadius:40,
137       outerRadius:50,
138       innerStyle:'blue',
139       outerStyle:'#E1E1E1',
140       text:'vue'
141    });
142    CircleText_vue.addToGroupLayer(Group3);
143 
144    var CircleText_bs=new CircleText({
145       x:outerRadius*Math.cos(200*Math.PI/180),
146       y:outerRadius*Math.sin(200*Math.PI/180),
147       innerRadius:45,
148       outerRadius:55,
149       innerStyle:'#E92322',
150       outerStyle:'#E1E1E1',
151       text:'Bootstrap'
152    });
153    CircleText_bs.addToGroupLayer(Group3);
154 
155    var CircleText_jq=new CircleText({
156       x:outerRadius*Math.cos(30*Math.PI/180),
157       y:outerRadius*Math.sin(30*Math.PI/180),
158       innerRadius:35,
159       outerRadius:45,
160       innerStyle:'#A735D8',
161       outerStyle:'#E1E1E1',
162       text:'jQuery'
163    });
164    CircleText_jq.addToGroupLayer(Group3);
165    animateLayer.add(Group3);//3环的组添加到层上
166 
167    animateLayer.draw();
168 
169 
170    var rotateAnglPerSecond=60;////每秒钟设置旋转60
171    //Konva帧动画系统
172    var animate=new Konva.Animation(
173       function(frame){
174          //每隔一会执行此方法，类似 setInterval
175          //timeDiff: 两帧之间时间差。是变化的，根据电脑性能和浏览器的状态动态变化。
176          //计算 当前帧需要旋转的角度。
177         var rotateAngle=rotateAnglPerSecond*frame.timeDiff/1000;//上一帧到当前帧的时间差 毫秒
178          Group2.rotate(rotateAngle);// 不是弧度，是角度
179          //获得二环上圆的内部组进行反向旋转
180          Group2.getChildren().each(function(item,index){
181             item.rotate(-rotateAngle);
182          });
183 
184          //3环逆旋转
185          Group3.rotate(-rotateAngle);
186          //获得三环上圆的内部组进行反向旋转
187          Group3.getChildren().each(function(item,index){
188             item.rotate(rotateAngle);
189          });
190 
191       },animateLayer);
192    animate.start();//启动动画
193 
194 
195    //Konva 事件系统
196    //给动画层绑定一个鼠标移上去的事件
197    animateLayer.on('mouseover',function(){
198       //设置旋转角度
199       rotateAnglPerSecond=10;//设置旋转的角度为10度，旋转变慢。
200    });
201    //给动画层绑定 mouseout离开的事件。
202    animateLayer.on('mouseout',function(){
203       //当鼠标移开的时候，旋转加快
204       rotateAnglPerSecond=60;//设置旋转角度为60度，旋转变快
205    });
206 
207 
208 </script>
209 </body>
210 </html>

2、CircleText.js

 1 /**
 2  * Created by Administrator on 2018/2/1.
 3  */
 4 function CircleText(option){
 5     this._init(option);//构造函数默认执行初始化工作
 6 }
 7 
 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';//外圆的填充样式
17 
18         //创建文字和圆形的一个组
19         this.group=new Konva.Group({
20             x:this.x,//设置组的x，y坐标后，所有的内部元素按照组内的新坐标系定位。
21             y:this.y
22         });
23 
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);
34 
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);
46 
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         },
60 
61     //把 组添加到层或者其他组中。
62     addToGroupLayer:function(arg){
63         arg.add(this.group);
64     }
65 
66     }

运行效果：

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-02-03 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

第165天：canvas绘制圆环旋转动画

第165天：canvas绘制圆环旋转动画

canvas绘制圆环旋转动画——面向对象版

1、HTML

2、CircleText.js

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐