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