JavaScript canvas实现围绕旋转动画
程序员文章站
2022-09-07 21:59:07
使用canvas的convas来实现围绕旋转动画,外圈顺时针,里层逆时针
代码demo链接地址:
html文件
...
使用canvas的convas来实现围绕旋转动画,外圈顺时针,里层逆时针
代码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); } }
效果图片:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。