Rotate the dial on top of a semi circular(Northern Hemisphere) image as background. range could be 0 - 180 degrees. on input to the method that does canvas transformation, the dial would rotate and stop over the matched value. Here's what I was trying based on help and sample passed on by phrogz
Syntax: transform: rotate(90deg);
To do that you need to first context. translate to the rect's centerpoint before rotating. // move the rotation point to the center of the rect ctx. translate( x+width/2, y+height/2 ); // rotate the rect ctx.
To rotate a shape around its own center, you must first translate the canvas to the center of the shape, then rotate the canvas, then translate the canvas back to 0,0, and then draw the shape. This example first translates (moves) the center of the canvas to the center of the square (cx, cy).
In general, what you want to do is:
In code:
ctx.save(); ctx.translate( canvasRotationCenterX, canvasRotationCenterY ); ctx.rotate( rotationAmountInRadians ); ctx.translate( -objectRotationCenterX, -objectRotationCenterY ); ctx.drawImage( myImageOrCanvas, 0, 0 ); ctx.restore();
Here's a working example showing this in action. (The math for the rotation was just experimentally hacked to find a swing amount and offset in radians that fit the quickly-sketched gauge dial.)
As may be evident, you can substitute the translate
call in step #3 above with offsets to the drawImage()
call. For example:
ctx.drawImage( myImageOrCanvas, -objectRotationCenterX, -objectRotationCenterY );
Using context translation is recommended when you have multiple objects to draw at the same location.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With