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 相关文章推荐
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
PHP开发文件系统实例讲解
2006/10/09 PHP
php生成缩略图的类代码
2008/10/02 PHP
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python实现TF-IDF算法解析
2018/01/02 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
python实现Virginia无密钥解密
2019/03/20 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
小学家长会邀请函
2014/01/23 职场文书
《春雨》教学反思
2014/04/24 职场文书
空气的环保标语
2014/06/12 职场文书
会员卡清退活动总结
2014/08/27 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
PyTorch的Debug指南
2021/05/07 Python
JavaScript函数柯里化
2021/11/07 Javascript