JavaScript canvas实现围绕旋转动画

2024-12-16 15:18:01

使用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结合相关技术来实现图片的旋转效果.我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie6,7,8不支持HTML5的浏览器,我们使用IE特有的滤镜效果来实现图片旋转. HTML 我们在页面中放置一张图片,在图片的上方放置两个按钮,通过onclick事件调用rotate()函数来控制图片向左向右旋转. <div id="tool">
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:
javascript+HTML5的Canvas实现Lab单车动画效果

本文实例讲述了javascript+HTML5的Canvas实现Lab单车动画效果.分享给大家供大家参考.具体如下: 这里运用HTML5实现的单车动画,运行一下效果你就明白了,不过不要在IE8下测试,没效果的.请在支持最新HTML3和CSS3的浏览器下测试,祝您好运. 运行效果截图如下: 具体代码如下: <html> <head> <title>Canvas Lab单车动画,HTML5动画</title> </head> <script t
JavaScript+Canvas实现带跳动效果的粒子动画

目录前言实现过程运行效果总结前言用 HTML5 的 Canvas 元素实现一个带有跳动效果的粒子动画.会用到 Canvas 的2D渲染上下文,通过 JavaScript 编写绘图代码,实现画布上一系列粒子的随机运动和相互作用.还会使用 CSS3 动画属性,使得画布背景颜色和粒子颜色能够流畅地过渡,达到更加自然的效果. 代码运行效果在底部实现过程 1.创建 Canvas 元素,并获取其上下文在实现粒子跳动动画的过程中,第一步需要创建一个 Canvas 元素,并获取其上下文.Canv
Android 3D旋转动画效果实现分解

这篇文章主要介绍一下如何实现View的3D旋转效果,实现的主要原理就是围绕Y轴旋转,同时在Z轴方面上有一个深入的缩放. 演示的demo主要有以下几个重点: 1,自定义旋转动画 2,动画做完后,重置ImageView 先看一下程序的运行效果: 1,自定义动画类这里实现了一个Rotate3dAnimation的类,它扩展了Animation类,重写applyTransformation()方法,提供指定时间的矩阵变换,我们在这个方法里,就可以利用Camera类得得到一个围绕Y轴旋转的matrix
jQuery实现图像旋转动画效果

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit
JavaScript+canvas实现七色板效果实例

本文实例讲述了JavaScript+canvas实现七色板效果.分享给大家供大家参考,具体如下: 效果图如下: html: <canvas id="canvas" class="canvas" width="600" height="600"></canvas> css: html,body{margin: 0;padding: 0} .canvas{display: block; margin-lef
JS实现图片旋转动画效果封装与使用示例

本文实例讲述了JS实现图片旋转动画效果封装与使用.分享给大家供大家参考,具体如下: 核心封装代码如下: //图片动画封装 function SearchAnim(opts) { for(var i in SearchAnim.DEFAULTS) { if (opts[i] === undefined) { opts[i] = SearchAnim.DEFAULTS[i]; } } this.opts = opts; this.timer = null; this.elem = document.
javascript canvas检测小球碰撞

本文实例为大家分享了javascript canvas实现检测小球碰撞的具体代码,供大家参考,具体内容如下定义一个canvas标签 <div class="cnavasInfo"> <canvas id="canvas" width="800" height="500" ></canvas> </div> 函数以及相关的逻辑处理 export default { data()
javascript canvas实现简易时钟例子

本文实例为大家分享了javascript canvas实现简易时钟的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
Android实现旋转动画的两种方式案例详解

目录练习案例效果展示前期准备自定义 View java代码编写方法一方法二易错点总结: 练习案例视差动画 - 雅虎新闻摘要加载效果展示前期准备第一步:准备好颜色数组 res => values => colors.xml <color name="orange">#FF9600</color> <color name="aqua">#02D1AC</color> <color n

JavaScript canvas实现围绕旋转动画

相关推荐

随机推荐