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

Question

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

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 中的第一段代码，所以，如果有什么有趣的地方，请随时纠正我的代码。