JavaScript画布实现围绕旋转的动画

使用canvas的convas实现绕转动画，外环顺时针，内层逆时针

代码演示链接地址：代码演示链接地址

Html文件

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title style body { margin : 0；padd : 0；飞越：隐藏；背景-颜色： # f0f 0；}/style脚本src=' http : js/konva。js '/script script src=' http : js/circle。js '/脚本/头体div id=' cas '/div脚本var width=window。内部宽度；可变高度=window.innerHeight//创建舞台定义变量阶段=新孔娃.载物台({容器cas : ’,宽度：高度： });//创建层定义变量层=新孔娃.layer()；//创建组1 var组=新孔娃.Group({ x: stage.width()/2，y: stage.height()/2，})；//最外层圆var circle1=新孔娃.圆({ x: 0，y: 0，radius: 250，stroke: '#ccc '，strokeWidth: 1，dash: [6，3]})；group.add(大约1);//第二个圆var circle2=新孔娃.圆({ x: 0，y: 0，radius: 150，stroke: '#ccc '，strokeWidth: 1，dash: [6，3]})；group.add(大约2);//第三个圆var circle3=新孔娃.圆形({ x: 0，y: 0，半径： 135，stroke: '蓝色，strokeWidth: 2，dash: [10，5]})；group.add(大约3);//第四个圆var circle4=新孔娃.圆圈({ x: 0，y: 0，radius: 105，fill: '#ccc '，opa city 3360 0 0.4 })；group.add(大约4);//第五个圆var circle5=新孔娃.圆圈({ x: 0，y: 0，radius: 80，fill : ' # 74a 2f 0 ' })；group.add(大约5);//添加文字var text=新Konva .文本({ x: -80，y: -12，text: 'WEB全栈，fill: '白色，字体大小： 24，宽度： 160，对齐： '中央' });团体。添加(文本)；层。添加(组)；//***************************************************** //创建组2 var outGroup=new Konva .Group({ x: stage.width()/2，y: stage.height()/2，})；var arrColor=['红色','绿色','蓝色','橙色','紫色'];var arrText=['web '，' node.js '，' ajax '，' html5 '，' CSS ']；for(var I=0；i5；I){ var cir=new Circle({ x : 250 * Math。cos(72 * I *数学.PI/180)，//圆心x轴的坐标y : 250 *数学. sin(72 * i *数学.PI/180)，//圆心y轴的坐标outR :60//外圆的半径inR :50//内圆的半径填充： arrColor[i]，//填充颜色text: arrText[i]，//文字outOpacity : 0.3，//外圆的透明度操作能力： 0.6 //内圆的透明度});cir。画圆(out GrouP)；}层。add(out GrouP)；//*********************************************** //创建组3 var inGroup=新Konva .Group({ x: stage.width()/2，y: stage.height()/2，})；var arrColor=['红色','绿色','蓝色','橙色','紫色'];var arrText=['web '，' node.js '，' ajax '，' html5 '，' CSS ']；for(var I=0；i5；I){ var cir=new Circle({ x : 135 * Math。cos(90 * I *数学.PI/180)，//圆心x轴的坐标y : 135 *数学. sin(90 * i *数学.PI/180)，//圆心y轴的坐标outR : 45，//外圆的半径inR : 35，//内圆的半径填充： arrColor[i]，//填充颜色text: arrText[i]，//文字outOpacity : 0.3，//外圆的透明度操作能力： 0.6 //内圆的透明度});cir。画圆(InGroup)；}层。添加(InGroup)；//************************************************ //运动动画定义变量步长=1;//转动的角度var anim=new Konva .动画（函数(){ OutGrouP。旋转(步进))；outGroup.getChildren().每个（函数(元素，索引){元素。旋转(-step)；});向内旋转(-步);inGroup.getChildren().每个函数(元素，索引){元素。旋转(步进)；});},层);动漫。start()；stage.add(层);stage.on('mouseover '，function(){ step=0.3；});stage.on('mouseout '，function(){ step=1；});/脚本/正文/html js文件

功能圆{这个._ init(obj)；}圈。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，//外圆的透明度这个。不合时宜。不合时宜/内圆的透明度}，图纸编号：函数（组){ //创建一个组var groupCir=new Konva .Group({ x: this.x，y : this。y })；//外圆var outCir=新Konva .圆圈({ x: 0，y: 0，radius: this.outR，fill: this.color，opa city 3360 this。OutOpacity })；集团cir。添加(Octir)；//内圆var inCir=new Konva .圆圈({ x: 0，y: 0，radius: this.inR，fill: this.color，opa city 3360 this。InToIt })；集团cir。add(InCr)；//添加文字var text=新Konva .文本({ x: -this.inR，y: -10，text: this.text，fill: 'white '，fontSize: 20，width: 2 * this.inR，align : ' center ' })；groupCir.add(文本);团体。add(GrouP CiR)；} } 效果图片：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。