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 相关文章推荐
js禁止回车提交表单的示例代码
Dec 23 Javascript
Javascript闭包实例详解
Nov 29 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
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面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
php实现分页显示
2015/11/03 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
用python代码做configure文件
2014/07/20 Python
python爬虫常用的模块分析
2014/08/29 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
基于Python os模块常用命令介绍
2017/11/03 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
生产内勤岗位职责
2013/12/07 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python