cari

Rumah  >  Artikel  >  hujung hadapan web  >  JavaScript canvas实现围绕旋转动画

JavaScript canvas实现围绕旋转动画

小云云
小云云asal
2017-12-09 11:23:422771semak imbas

本文主要为大家详细介绍了JavaScript canvas实现围绕旋转动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

使用canvas的convas来实现围绕旋转动画，外圈顺时针，里层逆时针。

代码demo链接地址：代码demo链接地址

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> 
<p id="cas"></p> 
 
<script> 
 var width = window.innerWidth; 
 var height = window.innerHeight; 
 //创建舞台 
 var stage = new Konva.Stage({ 
  container: "cas", 
  width: width, 
  height: height 
 }); 
 //创建层 
 var layer = new Konva.Layer(); 
 //创建组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); 
 //***************************************************** 
 //创建组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, //内圆的半径 
   fill : arrColor[i], //填充颜色 
   text: arrText[i], //文字 
   outOpacity : 0.3, //外圆的透明度 
   inOpacity : 0.6  //内圆的透明度 
  }); 
  cir.drawCircle(outGroup); 
 } 
 layer.add(outGroup); 
 
 //*********************************************** 
 //创建组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, //内圆的半径 
   fill : arrColor[i], //填充颜色 
   text: arrText[i], //文字 
   outOpacity : 0.3, //外圆的透明度 
   inOpacity : 0.6  //内圆的透明度 
  }); 
  cir.drawCircle(inGroup); 
 } 
 layer.add(inGroup); 
 
 //************************************************ 
 //运动动画 
 var step = 1; //转动的角度 
 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, //内圆的半径 
  this.color = obj.fill, //填充颜色 
  this.text = obj.text, //内圆的文字 
  this.outOpacity = obj.outOpacity, //外圆的透明度 
  this.inOpacity = obj.inOpacity  //内圆的透明度 
 }, 
 drawCircle: function (group) { 
  //创建一个组 
  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); 
  //内圆 
  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); 
 } 
}

效果图片：

JavaScript canvas实现围绕旋转动画

css旋转动画效果的简单实现示例详解

3D立方体旋转动画

Atas ialah kandungan terperinci JavaScript canvas实现围绕旋转动画. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：NodeJS实现视频转码的示例代码Artikel seterusnya：JavaScript的正则也有单行模式了

Artikel berkaitan

Lihat lagi