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 }
运行效果：
