JavaScript canvas實現(xiàn)圍繞旋轉(zhuǎn)動畫

2019-11-19 14:55:03

字體：大中小

供稿：網(wǎng)友

使用canvas的convas來實現(xiàn)圍繞旋轉(zhuǎn)動畫，外圈順時針，里層逆時針

html文件

<!DOCTYPE html> <html> <head lang="en">  <meta charset="UTF-8">  <title></title>  <style>   body {    margin: 0;    padding: 0;    overflow: hidden;    background-color: #f0f0f0;   }  </style>  <script src="js/konva.js"></script>  <script src="js/circle.js"></script> </head> <body> <div id="cas"></div>  <script>  var width = window.innerWidth;  var height = window.innerHeight;  //創(chuàng)建舞臺  var stage = new Konva.Stage({   container: "cas",   width: width,   height: height  });  //創(chuàng)建層  var layer = new Konva.Layer();  //創(chuàng)建組1  var group = new Konva.Group({   x: stage.width() / 2,   y: stage.height() / 2,  });  //最外層圓  var circle1 = new Konva.Circle({   x: 0,   y: 0,   radius: 250,   stroke: "#ccc",   strokeWidth: 1,   dash: [6, 3]  });  group.add(circle1);  //第二個圓  var circle2 = new Konva.Circle({   x: 0,   y: 0,   radius: 150,   stroke: "#ccc",   strokeWidth: 1,   dash: [6, 3]  });  group.add(circle2);  //第三個圓  var circle3 = new Konva.Circle({   x: 0,   y: 0,   radius: 135,   stroke: "blue",   strokeWidth: 2,   dash: [10, 5]  });  group.add(circle3);  //第四個圓  var circle4 = new Konva.Circle({   x: 0,   y: 0,   radius: 105,   fill: "#ccc",   opacity: 0.4  });  group.add(circle4);  //第五個圓  var circle5 = new Konva.Circle({   x: 0,   y: 0,   radius: 80,   fill: "#74A2F0"   });  group.add(circle5);  //添加文字  var text = new Konva.Text({   x: -80,   y: -12,   text: "WEB全棧",   fill: "white",   fontSize: 24,   width: 160,   align: "center"  });  group.add(text);  layer.add(group);  //*****************************************************  //創(chuàng)建組2  var outGroup = new Konva.Group({   x: stage.width() / 2,   y: stage.height() / 2,  });  var arrColor = ["red", "green", "blue", "orange", "purple"];  var arrText = ["web", "node.js", "ajax", "html5", "css"];  for(var i = 0; i < 5; i++) {   var cir = new Circle({    x : 250 * Math.cos(72 * i * Math.PI / 180), //圓心x軸的坐標    y : 250 * Math.sin(72 * i * Math.PI / 180), //圓心y軸的坐標    outR : 60, //外圓的半徑    inR : 50, //內(nèi)圓的半徑    fill : arrColor[i], //填充顏色    text: arrText[i], //文字    outOpacity : 0.3, //外圓的透明度    inOpacity : 0.6  //內(nèi)圓的透明度   });   cir.drawCircle(outGroup);  }  layer.add(outGroup);   //***********************************************  //創(chuàng)建組3  var inGroup = new Konva.Group({   x: stage.width() / 2,   y: stage.height() / 2,  });  var arrColor = ["red", "green", "blue", "orange", "purple"];  var arrText = ["web", "node.js", "ajax", "html5", "css"];  for(var i = 0; i < 5; i++) {   var cir = new Circle({    x : 135 * Math.cos(90 * i * Math.PI / 180), //圓心x軸的坐標    y : 135 * Math.sin(90 * i * Math.PI / 180), //圓心y軸的坐標    outR : 45, //外圓的半徑    inR : 35, //內(nèi)圓的半徑    fill : arrColor[i], //填充顏色    text: arrText[i], //文字    outOpacity : 0.3, //外圓的透明度    inOpacity : 0.6  //內(nèi)圓的透明度   });   cir.drawCircle(inGroup);  }  layer.add(inGroup);   //************************************************  //運動動畫  var step = 1; //轉(zhuǎn)動的角度  var anim = new Konva.Animation(function() {   outGroup.rotate(step);   outGroup.getChildren().each(function (ele, index) {    ele.rotate(-step);   });   inGroup.rotate(-step);   inGroup.getChildren().each(function (ele, index) {     ele.rotate(step);   });  }, layer);  anim.start();  stage.add(layer);   stage.on("mouseover", function () {   step = 0.3;  });  stage.on("mouseout", function () {   step = 1;  }); </script> </body> </html>

js文件

function Circle(obj) {  this._init(obj); } Circle.prototype = {  _init: function (obj) {   this.x = obj.x, //圓心x軸的坐標   this.y = obj.y, //圓心y軸的坐標   this.outR = obj.outR, //外圓的半徑   this.inR = obj.inR, //內(nèi)圓的半徑   this.color = obj.fill, //填充顏色   this.text = obj.text, //內(nèi)圓的文字   this.outOpacity = obj.outOpacity, //外圓的透明度   this.inOpacity = obj.inOpacity  //內(nèi)圓的透明度  },  drawCircle: function (group) {   //創(chuàng)建一個組   var groupCir = new Konva.Group({    x: this.x,    y: this.y   });   //外圓   var outCir = new Konva.Circle({    x: 0,    y: 0,    radius: this.outR,    fill: this.color,    opacity: this.outOpacity   });   groupCir.add(outCir);   //內(nèi)圓   var inCir = new Konva.Circle({    x: 0,    y: 0,    radius: this.inR,    fill: this.color,    opacity: this.inOpacity   });   groupCir.add(inCir);   //添加文字   var text = new Konva.Text({    x: -this.inR,    y: -10,    text: this.text,    fill: "white",    fontSize: 20,    width: 2 * this.inR,    align: "center"   });   groupCir.add(text);    group.add(groupCir);  } }

效果圖片：