konva实现类似⾏星公转动画<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script src="bower_components/konva/konva.js"></script>
<script>
var stage = new Konva.Stage({
container:"box",
width:window.innerWidth,
height:window.innerHeight
});
var cx = 400;
var cy = 400;
var bigRadius = 240;
var middleRadius = 160;
var centerRadius = 80;
var bgLayer = new Konva.Layer();
stage.add(bgLayer);
var bigCircle = new Konva.Circle({
x:cx,
y:cy,
radius:bigRadius,
stroke:"#ccc",
dash:[10,2]
});
bgLayer.add(bigCircle);
var middleCircle = new Konva.Circle({
x:cx,
y:cy,
radius:middleRadius,
stroke:"#ccc",
dash:[10,2]
});
bgLayer.add(middleCircle);
var centerCircle = new CircleText({
x:cx,
y:cy,
innerRadius:centerRadius,
outerRadius:centerRadius+30,
innerFill:"#369",
outerFill:"#ddd",
text:"WEB前端",
fontSize:18,
fontWeight:"bold",
fontFill:"#fff",
fontX:-35,
fontY:-9
});
bgLayer.add(centerCircle);
bgLayer.draw();
var layer = new Konva.Layer();
stage.add(layer);
var bigCircleData = [
{
innerRadius:40,
outerRadius:50,
innerFill:"#5cb85c",
outerFill:"#ddd",
text:"HTML5",
fontSize:14,
fontX:-20,
fontY:-7,
opacity:.7
},
{
innerRadius:40,
outerRadius:50,
innerFill:"#5bc0de",
outerFill:"#ddd",
text:"CSS3",
fontSize:14,
fontX:-20,
fontY:-7,
opacity:.7
},
{
innerRadius:40,
outerRadius:50,
innerFill:"#f0ad4e",
outerFill:"#ddd",
text:"ECMA6",
fontSize:14,
fontX:-20,
fontY:-7,
opacity:.7
},
{
innerRadius:40,
outerRadius:50,
innerFill:"#d9534f",
outerFill:"#ddd",
text:"jQuery",
fontSize:14,
fontX:-20,
fontY:-7,
opacity:.7
},
{
innerRadius:40,
outerRadius:50,
innerFill:"#428bca",
outerFill:"#ddd",
text:"NodeJS",
fontSize:14,
fontX:-20,
fontY:-7,
opacity:.7
}
];
var bigCircleGroup = new Konva.Group({
x:cx,
y:cy
});
layer.add(bigCircleGroup);
var angle = 0;
var angleDiff = 360 / bigCircleData.length;
bigCircleData.forEach(function(option, index){
option.x = s(angle / 180 * Math.PI) * bigRadius;        option.y = Math.sin(angle / 180 * Math.PI) * bigRadius;
option.y = Math.sin(angle / 180 * Math.PI) * bigRadius;
var circleText = new CircleText(option);
bigCircleGroup.add(circleText);
angle += angleDiff;
});
var middleCircleData = [
{
innerRadius:30,
outerRadius:40,
innerFill:"purple",
outerFill:"#ddd",
text:"VueJS",
fontSize:14,
fontX:-20,
fontY:-7,
opacity:.7
},
{
innerRadius:30,
outerRadius:40,
innerFill:"pink",
outerFill:"#ddd",
text:"Angle",
fontSize:14,
fontX:-20,
fontY:-7,
opacity:.7
}
]
var middleCircleGroup = new Konva.Group({
x:cx,
y:cy
});
layer.add(middleCircleGroup);
var angle1 = 0;
var angleDiff1 = 360 / middleCircleData.length;
middleCircleData.forEach(function(option, index){
option.x = s(angle1 / 180 * Math.PI) * middleRadius;        option.y = Math.sin(angle1 / 180 * Math.PI) * middleRadius;        var circleText = new CircleText(option);
middleCircleGroup.add(circleText);
angle1 += angleDiff1;
});
layer.draw();
var angleSpeed = 60;
var animation = new Konva.Animation(function(frame){
var angleDiff = angleSpeed * frame.timeDiff / 1000;
})
fontweight属性bold
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。