Javascript 使用三角学来制作HTML5画布的动画，但是如何定位这个正方形呢？

有时你希望能回到过去，告诉年轻的自己数学确实很重要！但我怀疑我当时是否会听。在这个特定的例子中，我最近一直在用HTML5画布玩三角函数来制作动画

这是一个超级简单的动画：它以圆形的方式围绕画布的中心放置一个圆弧。X和Y位置根据基本三角函数窦房结和余弦计算。苏哈托。我想我开始明白了。但不知怎的，我不知道如何在一个三角形的边上画一个正方形。< /P> 因此，通过将画布的中心与 返工公式：cosinus-对于X=Cos，对于Y=Sin，角度乘以圆的半径

如果我们只取X位置红线，并且想要画弧位置的一半。因此，在红线的中间，我们应该能够将新计算的X位置除以2，对吗？但如果我这样做，正方形就会神奇地完全画在圆的外面

发生了什么事？为什么会这样？在整个动画中，我应该用什么计算来代替正方形在红线的中间位置？

提前谢谢

您的x定义为：

x = centerX + Math.cos(angle) * radius;

但是，当你想除以2时，你只需要除以Math.cosangle*半径，而centerX是零点，它的支架就是这样

因此，rect应放置在：

centerX + Math.cos(angle)/2

此外，我认为如果将rect宽度减少一半，并获得：

centerX + Math.cos(angle)/2 - 10

const canvas=document.querySelector'canvas'； const ctx=canvas.getContext'2d'； 半径=200； 函数框架角度{ 常数cx=canvas.width/2， cy=画布高度/2， x=数学余弦角*半径， y=数学正弦角度*半径； ctx.clearRect0，0，canvas.width，canvas.height； ctx.beginPath； ctx.moveTocx，cy； ctx.lineTocx+x，cy+y； ctx.lineTocx+x，cy； ctx.lineTocx，cy； ctx.stroke； ctx.closePath； ctx.beginPath； ctx.arccx+x，cy+y，10，0，Math.PI*2； ctx.fill； ctx.fillRectcx+x/2-10，cy-10,20,20； ctx.closePath； requestAnimationFrame=>frameangle+.03； } 框架0 帆布{ 显示：块； 最大高度：100vh； 保证金：自动； }

---

啊，真的！感谢您提供的示例和代码的不同视角。在一次小小的休息后，我发现我做错了什么，你的代码帮了我大忙！正方形只是一个小圆。所以把半径分成两半也可以解决这个问题。

centerX + Math.cos(angle)/2 - 10