JavaScript canvas实现围绕旋转动画


Posted in Javascript onNovember 18, 2017

使用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> 
<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实现围绕旋转动画

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
详解JavaScript类型判断的四种方法
Oct 21 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 #Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 #Javascript
深入研究React中setState源码
Nov 17 #Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 #Javascript
jQuery实现滚动效果
Nov 17 #jQuery
不使用 JS 匿名函数理由
Nov 17 #Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 #Javascript
You might like
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php实现RSA加密类实例
2015/03/26 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
python操作日期和时间的方法
2014/03/11 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
python中doctest库实例用法
2020/12/31 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
教师个人鉴定材料
2014/02/08 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
长城导游词400字
2015/01/30 职场文书
教师党员个人自我评价
2015/03/04 职场文书
车间质检员岗位职责
2015/04/08 职场文书
市场督导岗位职责
2015/04/10 职场文书
大学生求职意向书
2015/05/11 职场文书
放牛班的春天观后感
2015/06/01 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
家属联谊会致辞
2015/07/31 职场文书
基督教追悼会答谢词
2015/09/29 职场文书