一尘不染

使用HTML5 Canvas-围绕任意点旋转图像

html

将转盘旋转到半圆形(北半球)图像的顶部作为背景。范围可以是0-180度。输入进行画布转换的方法时,刻度盘将旋转并停在匹配的值上。这是我根据phrogz传递的帮助和示例进行的尝试


阅读 807

收藏
2020-05-10

共1个答案

一尘不染

通常,您要执行的操作是:

  1. 将上下文转换为画布上对象应旋转的点。
  2. 旋转上下文。
  3. 通过对象内旋转中心的负偏移来转换上下文。
  4. 在0,0处绘制对象。

在代码中:

ctx.save();
ctx.translate( canvasRotationCenterX, canvasRotationCenterY );
ctx.rotate( rotationAmountInRadians );
ctx.translate( -objectRotationCenterX, -objectRotationCenterY );
ctx.drawImage( myImageOrCanvas, 0, 0 );
ctx.restore();

这是一个实际的示例,展示了这一点。(旋转的数学运算只是实验性地破解,以找到适合快速绘制的仪表盘的摆动量和弧度偏移。)

显而易见的是,您可以将上述translate步骤3中的呼叫替换为该呼叫的偏移量drawImage()。例如:

ctx.drawImage( myImageOrCanvas, -objectRotationCenterX, -objectRotationCenterY );

当您在同一位置绘制多个对象时,建议使用上下文转换。

2020-05-10