围绕圆旋转三角形（2D）

Question

我正在尝试围绕一个圆圈旋转一个三角形，三角形应该始终朝外，这意味着它应该围绕圆圈旋转，并且我猜是围绕它的中心旋转。 我找到了this 问题，这与我需要的类似，但正好相反。 我需要的另一件事是让三角形指向用户的鼠标坐标。又名三角形就像一个箭头。

Answer 1

我刚刚编辑了您链接的代码并将矩形替换为三角形，当然animate() 使用鼠标移动侦听器：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cx = 100;
var cy = 100;
var radious = 10;
var gap = 5;
var triangleHeight = 25;
var triangleBase = 10;
redraw(cx + 1, cy);

function redraw(mx, my)
{
  mox = mx-cx;
  moy = my-cy;
  rotation = Math.atan2(moy, mox);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(cx, cy, radious, 0, Math.PI * 2);
  ctx.closePath();
  ctx.fill();
  ctx.save();
  ctx.translate(cx, cy);
  ctx.rotate(rotation);
  ctx.beginPath();
    ctx.moveTo(radious+gap, -triangleBase/2);
    ctx.lineTo(radious+gap, triangleBase/2);
    ctx.lineTo(radious+gap+triangleHeight, 0);
    ctx.lineTo(radious+gap, -triangleBase/2)
  ctx.stroke();
  ctx.restore();

}

canvas.addEventListener("mousemove", function (e) {
redraw(e.pageX, e.pageY);
}, false);

<canvas id="canvas"></canvas>

顺便说一句，这是我在 JS 中的第一段代码，所以，如果有什么有趣的地方，请随时纠正我的代码。