当前位置:首页 > 编程教程 > javascript技术文章 > JavaScript canvas实现围绕旋转动画

详解使用canvas实现围绕旋转动画

  • 发布时间:
  • 作者:码农之家
  • 点击:94

这篇文章主要知识点是关于JavaScript、canvas、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Head First JavaScript程序设计
  • 类型:JavaScript大小:71.2 MB格式:PDF作者:[美]埃里克·T.弗里曼
立即下载

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

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

JavaScript 相关电子书
学习笔记
网友NO.350259

JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析

本文实例讲述了JavaScript+Canvas实现彩色图片转换成黑白图片的方法。分享给大家供大家参考,具体如下: 1、convertToGray() 在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布;彩色图片加载完成后,使用 drawImage() 将图片加载到上下文,调用用于完成剩余绘制工作的 getColorData() 和 putColorData() ;最后为myImage指定彩色图片的路径。 2、getColorData() 使用 getImageData() 将图像复制到 myImage,然后按照以下方式处理图像:在图像数据数组中移动,并收集前三个字节(红色、绿色和蓝色,忽略 alpha)的值;然后,该图像将三个字节的值相加,并将总和除以3,计算结果将舍入为一个整数,并被写入到这三个字节的值中。此值对应于颜色的色调,但灰度值从0到255,得到外观与原始彩色图片相同的黑白图片。 3、……

网友NO.623300

JavaScript Canvas绘制圆形时钟效果代码实例

本文实例为大家分享了Canvas时钟效果展示的具体代码,供大家参考,具体内容如下 html lang=en head meta charset=UTF-8 title/title style canvas{ display: block; margin: 0 auto; background-color: #fdffad; border: 1px solid #000; } /style script type=text/javascript document.addEventListener(DOMContentLoaded,function(){ var oC=document.querySelector(canvas); var gd=oC.getContext(2d); var r=oC.width/2; function drawBackground() { gd.save(); //渐变 var ra = gd.createLinearGradient(600, 0, 400, 0); ra.addColorStop(1, #2dd9ff); ra.addColorStop(0, #8c48dd); //表盘 gd.translate(r, r); gd.beginPath(); gd.fillStyle = ra; gd.lineWidth = 10; gd.strokeStyle = #211f4e; gd.arc(0, 0, r-5, 0, Math.PI *2, false); gd.fill(); gd.stroke(); //数字 for (var i = 1; i 13; i++) { var rad=i * Math.PI * 2 / 12; var x = Math.sin(rad)*(r-70); var y= -Math.cos(rad)*(r-70); gd.fillStyle = red; gd.font = bold 80px Calibri; gd.lineWidth = 1; gd.textAlign = center; gd.textBaseline = midd……

网友NO.638451

javaScript canvas实现(画笔大小 颜色 橡皮的实例)

实例如下所示: !DOCTYPE htmlhtml head meta charset="utf-8" / title/title /head body div div !--input type="button" id="open" value="open"/input input type="button" id= "save" value = "save"/input input type="button" id= "color" value="color"/input -- input type="button" value="size"/input input type="text" id="size" onchange="sizeChange()"/input input type="button" id="clear" value="clear"/input input type="button" id="eraser" value="eraser" onclick="doEraser()"/input select id = "shape" onchange="shapeChange()" option value = "99"shape/option option value = "1"rectangle/option option value = "0"circle/option option value = "2"line/option /select input id="color" type="color"/ /div canvas id="myCanvas" width="800" height="500"/canvas /div /body script language="JavaScript" var shap = 99; //0 is circle; 1 is rectangle var orignalX, orignalY;//the coordinate of mouse down var lastX, lastY;//the coordinate of last mouse position var isMouseDown = false; // flag of mouse pressing do……

网友NO.203213

JavaScript html5 canvas实现图片上画超链接

本文实例为大家分享了html5 canvas在图片上画超链接的具体代码,供大家参考,具体内容如下 1. html canvas id="canvasFile" width="500" height="400"/canvas input type="button" id="btnRedo" value="Re-Draw" class="btn btn-warning"/ 2. javascript var photoW = 400; var photoH = 300; var photo; // logic load image into canvas // ... // e.g. // photo = new Image(); // photo.onload = function() { // draw photo into canvas when ready // ctx.drawImage(photo, 0, 0, photoW, photoH); // }; // load photo into canvas // photo.src = picURL; // canvas highlight var canvas = document.getElementById('canvasFile'), ctx = canvas.getContext('2d'), img = new Image; var btnDone = document.getElementById('btnDone'); var btnRedo = document.getElementById('btnRedo'); ctx.strokeStyle = '#FF0000'; function DrawDot(x, y) { var centerX = x; var centerY = y; var radius = 2; ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); ctx.fillStyle = 'red'; ctx.fill(); ctx.li……

网友NO.220174

基于JavaScript canvas绘制贝塞尔曲线

简单描述:页面上有四个点,鼠标拖动四个点的位置来改变贝塞尔曲线的形状,双击放置点位 效果图: 代码: !DOCTYPE htmlhtml lang="en" head meta charset="UTF-8" titleTitle/title style html{overflow: hidden;} * {padding: 0;margin: 0;} #box {background-color: #000000;} .point { width: 20px; height: 20px; background-color: #fff; border-radius: 50%; position: absolute; left: 100px; top:200px; text-align: center; line-height: 20px; } /style /head body canvas id="box"/canvas div class="point startPoint"b/div div class="point endPoint"e/div div class="point point1"1/div div class="point point2"2/div script src="js/max.js"/script /body/html js: /** * Created by Administrator on 2017/8/11. * js/max.js */(function () { var curEle = null; var startPointView = document.querySelector(".startPoint"); var endPointPointView = document.querySelector(".endPoint"); var point1View = document.querySelector(".point1"); var point2View = document.querySelector(".point……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com