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

Question

Hey I have two circular images in a canvas

I wanted these two things:

1. when we click the button wheel1 then I wanted rotate left wheel clockwise to 45 degrees and stop.
2. when we click the button wheel2 then I wanted rotate right wheel anti-clockwise to 45degrees and stop.

I have been able to achieve the first one. But I have tried the whole day today and I am not able to figure out that how can I achieve the second point. When I click on the second button the left wheel stops rotating and the right wheel is rotating in the whole canvas.

How can I rotate the right wheel anti clockwise to 45 degrees?Also is there any other efficient way to achieve the part in the question I have already achieved?

Answer 1

• Only load images once. There is no need to load the image every time you need to draw it. Also both wheels are the same image so you only need one copy of the image.

• Use requestAnimationFrame to animate canvas content.

• Only get the canvas context once. There is no need to get it every frame.

• Avoid changing the canvas size when there is no need to do so, as setting the canvas width or height, even if the same value will reset the whole 2D context state.

• Don't repeat the same code. The wheels are almost identical apart from position and rotation. Define an object that describes a wheel and create that object for both wheels, setting only the properties that make them unique,.

• Do you really need jQuery? It is just bloat that will slow your page down and for all those additional lines of javascript you loaded you only called it twice. Using jQuery is no longer relevant, modern browser APIs are much faster and more powerful. Don't get left behind.

Example

Example of writing your code using the points outlined above.

 const wheelImg = new Image; wheelImg.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 = innerHeight - 40; const ctx = canvas.getContext("2d"); const wheelScale = 0.4; // scales the wheels const rotateCount = 100; // frames (@60 per second) var activeWheelCount = 0; // to track if any wheels are active // when the image has loaded set up click events and draw the first frame wheelImg.addEventListener("load",() => { requestAnimationFrame(mainLoop) clockwiseBtn.addEventListener("click",() => wheels[0].start(Math.PI / 2)); antiClockwiseBtn.addEventListener("click",() => wheels[1].start(-Math.PI / 2)); } ,{once:true} ); // defines a single wheel const wheel = (x,y,rot) => ({ x,y,rot, rotTarget: rot, counter: 0, start(ang) { // command a wheel to turn if (!this.counter ) { // make sure not already turning this.counter = rotateCount; this.rotTarget += ang; if (!activeWheelCount) { requestAnimationFrame(mainLoop) } // start the // animation is no wheel // is active activeWheelCount ++; } }, update() { // update the wheel animation counter this.counter += this.counter > 0 ? -1 : 0; if (this.counter === 0) { this.rot = this.rotTarget } else { activeWheelCount += 1 } // count this wheel as an active wheel }, draw() { // draw the wheel const r = (1 - (this.counter / rotateCount)) * (this.rotTarget - this.rot) + this.rot; ctx.setTransform(wheelScale, 0, 0, wheelScale, this.x, this.y); ctx.rotate(r); ctx.drawImage(wheelImg, -wheelImg.width / 2, -wheelImg.height / 2); } }); const wheels = [wheel(90,80, 0), wheel(350,80,0)]; // create two wheels function mainLoop() { // animates wheels activeWheelCount = 0; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height); wheels.forEach(wheel => wheel.update()); wheels.forEach(wheel => wheel.draw()); if (activeWheelCount) { requestAnimationFrame(mainLoop); } }

 #canvas { border:solid 1px black; position:absolute; top:30px; left:0px; }

 <canvas id="canvas"></canvas> <button id='clockwiseBtn'>Wheel1</button> <button id='antiClockwiseBtn'>Wheel2</button>