Javascript 在同一画布上顺时针旋转一个轮子，逆时针旋转另一个轮子

嘿，我在画布中有两个圆形图像，如下所示：

我想要这两样东西：

当我们点击按钮wheel1时，我想将左轮顺时针旋转45度并停止。 当我们点击按钮wheel2时，我想要逆时针旋转右车轮到45度并停止。 我已经能够实现第一个目标。 但我今天已经试了一整天，我不知道如何才能达到第二点。 当我点击第二个按钮时，左轮停止旋转，右轮在整个画布上旋转

如何将右车轮逆时针旋转45度？还有没有其他有效的方法来实现我已经实现的问题中的部分

我用这张图片作为参考

这是我的密码：

变量CV、ctx、img、img2、img3、im、im2、x、y、gblTask、gblTask2、gblTask3、gblTask4、r1=0， r2=0； $document.readyfunction{ //$p.clickfunction{ //$this.hide； // }; 环 }; 让圆={ 学位:0,， draww：函数{ var图像=新图像； image.src=https://www.freeiconspng.com/uploads/car-wheel-png-image-free-download-car-wheel-png-image-free-11.png; im=图像； im.onload=函数{ ctx.drawImageim，0,20,200,200； } }, 图W2：函数{ var图像=新图像； image.src=https://www.freeiconspng.com/uploads/car-wheel-png-image-free-download-car-wheel-png-image-free-11.png; im2=图像； im2.onload=函数{ ctx.drawImageim2，cvs.width/2，20，200，200； } }, drawRotatedd2：函数{ ctx.clearRectcvs.width/2，0，cvs.width，cvs.height； ctx.save； ctx.translatecvs.width/2，cvs.height/2； ctx.rotatethis.degrees-=1*Math.PI/180； ctx.drawImageim2，-cvs.width/2+400，-cvs.height/2+200200200； ctx.restore； 如果此值为0.45度==0{ r2=0； clearIntervalgblTask3； clearIntervalgblTask4； } }, drawRotatedd：函数{ ctx.clearRect0，0，cvs.width/2，cvs.height； ctx.save； ctx.translateim.width/2，im.height/2； ctx.rotatethis.degrees+=1*Math.PI/180； ctx.drawImageim，-im.width/2，-im.height/2200200； ctx.restore； 如果此值为0.45度==0{ r1=0； clearIntervalgblTask； clearIntervalgblTask2； } } } //document.getElementById'cnv'。addEventListener'click'，functionevent{ ////circle.drawRotated； //gblTask=setIntervalgblTask2=setIntervalfunction{circle.drawRotatedd}，10100； // }; document.getElementById“顺时针”。addEventListener“单击”，函数{ 如果r1==0{ r1=1； gblTask=setIntervalgblTask2=setIntervalfunction{ 圆 }, 10, 100; }否则{ 控制台。日志'1'； } }; document.getElementById“逆时针”。addEventListener“单击”函数{ 如果r2==0{ r2=1； gblTask3=setIntervalgblTask4=setIntervalfunction{ 圆圈2 }, 10, 100; }否则{ 控制台。日志'1'； } }; 函数环{ var canvas=document.getElementById'cnv'； var context=canvas.getContext2d； 画布宽度=800； 高度=450； ctx=上下文； cvs=画布； //画圆圈； 圆圈.draww； 圆形图w2； } 轮子1 轮子2 只加载一次图像。无需在每次需要绘制图像时加载图像。此外，两个控制盘都是相同的图像，因此您只需要一个图像副本

使用requestAnimationFrame设置画布内容的动画

只获取画布上下文一次。没有必要每帧都获取它

避免在不需要更改画布大小时更改画布大小，例如设置画布宽度或高度，即使相同的值将重置整个2D上下文状态

不要重复相同的代码。除了位置和旋转外，车轮几乎完全相同。定义描述控制盘的对象，并为两个控制盘创建该对象，仅设置使其唯一的特性

您真的需要jQuery吗？只是膨胀会减慢页面速度，对于加载的所有额外javascript行，您只调用了两次。使用jQuery已不再相关，现代浏览器API速度更快、功能更强大。不要被落在后面

实例 使用上述要点编写代码的示例

const wheelImg=新图像； 车轮img.src=https://www.freeiconspng.com/uploads/car-wheel-png-image-free-download-car-wheel-png-image-free-11.png; canvas.width=innerWidth-30； canvas.height=内部高度-40； const ctx=canvas.getContext2d； 常数轮刻度=0.4；//秤轮子 常量旋转计数=100；//每秒60帧 var activeWheelCount=0；//跟踪是否有任何车轮处于活动状态 //图像加载设置后，单击事件并绘制第一帧 wheelImg.addEventListenerload，=>{ requestAnimationFramemainLoop 顺时针 tListenerclick，=>wheels[0].startMath.PI/2； antiClockwiseBtn.addEventListenerclick，=>wheels[1]。start-Math.PI/2； } ，{once:true} ; //定义单个控制盘 常数轮=x，y，rot=>{ x、 腐烂，腐烂， 目标：腐烂， 柜台:0,， startang{//命令轮子转动 如果！this.counter{//请确保尚未转动 this.counter=rotateCount； this.rotTarget+=ang； 如果！activeWheelCount{requestAnimationFramemainLoop}//启动 //动画不是轮子 //是活跃的 activeWheelCount++； } }, 更新{//更新控制盘动画计数器 this.counter+=this.counter>0？-1:0； 如果this.counter==0{this.rot=this.rotTarget} else{activeWheelCount+=1}//将此控制盘计为活动控制盘 }, 画{//画轮子 常数r=1-this.counter/rotateCount*this.rotTarget-this.rot+this.rot； ctx.setTransformwheelScale，0，0，wheelScale，this.x，this.y； 旋转器； ctx.drawImagewheelImg，-wheelImg.width/2，-wheelImg.height/2； } }; 常量车轮=[wheel90,80,0，wheel350,80,0]；//创建两个轮子 函数mainLoop{//设置轮子的动画 activeWheelCount=0； ctx.setTransform1,0,0,1,0,0； ctx.clearRect0,0，ctx.canvas.width，ctx.canvas.height； wheels.forEachwheel=>wheel.update； wheels.forEachwheel=>wheel.draw； 如果主动轮计数{ requestAnimationFramemainLoop； } } 帆布{ 边框：实心1px黑色； 位置：绝对位置； 顶部：30px； 左：0px； } 轮子1

---

大部分都是车轮。但我想弄明白，在这个代码中，旋转角度为45度时，如何提高旋转速度。我称之为startMath。PI/4和已经写了这个。ROTARGET+=ang+1；这增加了速度，也增加了角度。有没有办法在不增加角度的情况下提高速度？@abhishekranjan当前设置为100的恒定旋转计数定义了转动车轮所需的60秒帧数。如果将其更改为60，则车轮需要1秒才能转动1/4，更改为30，则需要半秒才能转动。