使用canvas的convas来实现围绕旋转动画,外圈顺时针,里层逆时针
html文件
Meta charset="UTF-8">
js文件
文字
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,radius: this.outR,fill: this.color,opacity: this.outOpacity
});
groupCir.add(outCir);
//内圆
var inCir = new Konva.Circle({
x: 0,radius: this.inR,opacity: this.inOpacity
});
groupCir.add(inCir);
//添加文字
var text = new Konva.Text({
x: -this.inR,y: -10,text: this.text,fontSize: 20,width: 2 * this.inR,align: "center"
});
groupCir.add(text);
原文链接:https://www.f2er.com/js/35163.htmlgroup.add(groupCir);
}
}