Javascript中的太阳弧路径

所以我试图画一个弧形路径的太阳（首选圆形路径）来模拟日出/日落，我遇到了一些问题

帆布宽度=800； 帆布高度=100

if(getTime() - sunTime > 100){
    angle++;
    sunTime = getTime();
}

sun.x = 400 * Math.sin(angle * (Math.PI/180));//Convert to degrees
sun.y = 100 * Math.sin(angle * (Math.PI/180));

这是代码，我正试图使它正确的弧，它似乎给了我错误的弧类型

HTML画布的奇怪之处在于（0,0）位于屏幕的左上角，因此有些奇怪。我试图找到一个像样的网站，解释如何找到它，但我发现的一切似乎并没有工作的方式，我希望它

---

我是根据我的数学知识做这个转换的。。。。Soooo如果这种方法太不合适，请让我知道

该错误是由于x和y都使用了窦房结。由于画布的方向为0°向右，因此应为：

sun.x = 400 * Math.cos(angle * (Math.PI/180));  // cos for x
sun.y = 100 * Math.sin(angle * (Math.PI/180));

请注意，此处400100是半径，因此要定义中心，还需要一个中心点：

sun.x = centerX + radiusX * Math.cos(angle * (Math.PI/180));
sun.y = centerY + radiusY * Math.sin(angle * (Math.PI/180));

只是要考虑的几个点-< /P> 什么是真实的日出/日落在很大程度上取决于你在世界上的位置（相对于纬度或φ）

例如，如果你住在厄瓜多尔，或者φ=0，太阳基本上会上下直射。如果你在北极圈（或南极圈）上方，你会有一个相当陡峭的角度。此外，在这些纬度地区，太阳在夏季永远不会落下，在冬季也永远不会升起

但是，如果你刚刚经过一个近似值，你可以定义0度角的基线（日出），180度角的日落，从左到右（或者从东到西，如果你在南半球，你可能会选择相反的方向）

Canvas的坐标系将有0°指向右侧，90°指向下方，因此我们将知道180-360°将是一条弧，天顶（最高点）位于270°

这将使用虚拟太阳和任意步骤绘制类似的圆弧：

var ctx=document.querySelector（“canvas”）.getContext（“2d”）；
var angle=Math.PI，//我们在这里使用弧度，0到Math.PI（=180）
centerX=ctx.canvas.width*0.5，//弧的中心
bottomY=ctx.canvas.height，
radiusX=ctx.canvas.width*0.8，//半径，本例中为宽度的80%
半径y=ctx.canvas.height*0.9；//半径，本例中为高度的90%
//以弧度PI到2xPI为单位旋转180到360°
对于（；角度

---

该错误是由于x和y都使用了窦房结。由于画布的方向为0°向右，因此应为：

sun.x = 400 * Math.cos(angle * (Math.PI/180));  // cos for x
sun.y = 100 * Math.sin(angle * (Math.PI/180));

请注意，此处400100是半径，因此要定义中心，还需要一个中心点：

sun.x = centerX + radiusX * Math.cos(angle * (Math.PI/180));
sun.y = centerY + radiusY * Math.sin(angle * (Math.PI/180));

只是要考虑的几个点-< /P> 什么是真实的日出/日落在很大程度上取决于你在世界上的位置（相对于纬度或φ）

例如，如果你住在厄瓜多尔，或者φ=0，太阳基本上会上下直射。如果你在北极圈（或南极圈）上方，你会有一个相当陡峭的角度。此外，在这些纬度地区，太阳在夏季永远不会落下，在冬季也永远不会升起

但是，如果你刚刚经过一个近似值，你可以定义0度角的基线（日出），180度角的日落，从左到右（或者从东到西，如果你在南半球，你可能会选择相反的方向）

Canvas的坐标系将有0°指向右侧，90°指向下方，因此我们将知道180-360°将是一条弧，天顶（最高点）位于270°

这将使用虚拟太阳和任意步骤绘制类似的圆弧：

var ctx=document.querySelector（“canvas”）.getContext（“2d”）；
var angle=Math.PI，//我们在这里使用弧度，0到Math.PI（=180）
centerX=ctx.canvas.width*0.5，//弧的中心
bottomY=ctx.canvas.height，
radiusX=ctx.canvas.width*0.8，//半径，本例中为宽度的80%
半径y=ctx.canvas.height*0.9；//半径，本例中为高度的90%
//以弧度PI到2xPI为单位旋转180到360°
对于（；角度

---

我承认，这是我得到的最好的答案之一。所以非常感谢你抽出时间来帮助我！这使它工作得非常完美：）。@user3585563没问题，很高兴我能帮上忙！：）祝你的项目好运。我承认，这是我得到的最好的答案之一。所以非常感谢你抽出时间来帮助我！这使它工作得非常完美：）。@user3585563没问题，很高兴我能帮上忙！：）祝你的项目好运。