欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript canvas实现围绕旋转动画

程序员文章站 2022-04-09 20:37:05
使用canvas的convas来实现围绕旋转动画，外圈顺时针，里层逆时针 代码demo链接地址： html文件 ...

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

代码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> 
<div id="cas"></div> 
 
<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实现围绕旋转动画

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： Lua面向对象编程学习笔记

下一篇： 浅谈flask中的before_request与after_request

推荐阅读