这次给大家带来js+canvas做出围绕旋转动画，js+canvas做出围绕旋转动画的注意事项有哪些，下面就是实战案例，一起来看一下。
使用canvas的convas来实现围绕旋转动画，外圈顺时针，里层逆时针
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>
<p id="cas"></p>
<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);
}
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
实现完整的angular4 formtext组件需要哪些步奏
在angular中怎么支持scss
以上就是js+canvas做出围绕旋转动画的详细内容。