JavaScript canvas实现围绕旋转动画

前端之家收集整理的这篇文章主要介绍了JavaScript canvas实现围绕旋转动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用canvas的convas来实现围绕旋转动画,外圈顺时针,里层逆时针

代码demo链接地址代码demo链接地址

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);

group.add(groupCir);
}
}

效果图片

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

猜你在找的JavaScript相关文章