问题描述
将半圆(北半球)图像顶部的刻度盘旋转为背景。
范围可以是0 - 180度。
在执行canvas转换的方法的输入上,表盘将旋转并停止匹配的值。
这是我根据传递的帮助和示例尝试的
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
推荐答案
一般来说,你想做的是:
In general, what you want to do is:
- 将上下文转换为画布上对象应该旋转的点。
- 旋转上下文。
$ b b
在代码中:
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.)
可能很明显,你可以替换 drawImage()
调用的 translate
调用。例如:
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.
这篇关于使用HTML5 Canvas - 关于任意点旋转图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!