使用HTML5 Canvas - 关于任意点旋转图像 [英] using HTML5 Canvas - rotate image about arbitrary point

问题描述

将半圆（北半球）图像顶部的刻度盘旋转为背景。
范围可以是0 - 180度。
在执行canvas转换的方法的输入上，表盘将旋转并停止匹配的值。
这是我根据 phrogz 传递的帮助和示例尝试的

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:

1. 将上下文转换为画布上对象应该旋转的点。


2. 旋转上下文。

$ 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 - 关于任意点旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！