javascript - 使用 Javascript Math 创建圆形图案中的虚线

Question

我对下面的代码不太理解，我希望有人能将其分解。

$(function() {
  var centerX = 200,
    centerY = 200,
    radius = 100,
    width = 15,
    angles = []

  function draw() {
    var ctx = document.getElementById("canvas").getContext("2d");
    var angle;
    //why 180 
    for (var i = 0; i < 180; i += 10) {
      //is the "angle" increasing on every iteration? can you demostrate this please
      angle = 2.1 + (i * Math.PI / 90);
      angles.push(angle)
      ctx.beginPath();
      ctx.moveTo(
        centerX + Math.sin(angle) * radius,
        centerY + Math.cos(angle) * radius
      );
      ctx.lineTo(
        centerX + Math.sin(angle) * (radius + width),
        centerY + Math.cos(angle) * (radius + width)
      );
      ctx.closePath();
      ctx.stroke();
    }
  }
  draw()
  console.log(angles)
  var str = "";
  angles.forEach(function(e, i) {
    str += " " + i + " : " + e + "|| Math.sin = " + Math.sin(e) + "|| Math.sin * radius = " + Math.sin(e) * radius
    $(".display").html(str)
  })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>
<div class="display"></div>

喜欢这部分angle = 2.1 + (i * Math.PI / 90);我明白了i递增 10，作者将其乘以 Math.PI / 90等于 0.0348888888888889。我知道 Math.PI 是 180 度，但我们没有做 180/90。我们正在少量增加 2.1 的数量。我无法将所有部分组合在一起。

以及for(var i = 0; i < 180; i += 10){为什么作者选择180。我知道180度是半圆，所以他们选择它？

我总是在其他代码中看到人们使用 cos x 坐标和 sin y 坐标。看起来作者并不像我刚才描述的那样使用它。你能详细说明一下吗？

如有任何帮助，我们将不胜感激!

编辑:我也想知道我们什么时候使用 for(var i = 0; i < 180; i += 10){我们得到一个完整的圆圈中的破折号，当我这样做时 i < 90我们得到了一个半圆，但是半圆并不像 x 或 y 轴那样笔直，而是成一个 Angular 。为什么它不在轴上？为什么它是一个 Angular ？

Answer 1

让我们从SOH CAH TOA(link)开始。

给定直 Angular 三 Angular 形(一侧为 90 度)..

• 三 Angular 形有一个 Angular 。
• 三 Angular 形有一条与 Angular 相反的边 (O)。
• 三 Angular 形有一条边与 Angular 和直 Angular 相切，称为 (A) 邻边。
• 三 Angular 形有一条边称为斜边 (H)。这是也与 Angular 接触但不与对边形成直 Angular 的边。

现在要找到任何边，您至少需要知道 Angular 和另一条边。

例如:您知道 Angular Q 为 40 度，斜边为 10。那么什么是相邻；

看看SOH CAH TOA。我发现我知道 H，并且需要知道 A。CAH 两者都有。所以我选择CAH。

Cos Q = Adj/Hyp

现在，如果你把这个三 Angular 形放在圆圈内。然后 Hyp 将成为半径，如下所示:

Cos Q = Adj/radius

现在要绘制从圆向外延伸的线，我需要知道线的起点和终点，并且需要使这些点与圆 Angular 对齐。

为了获得起点，我可以使用圆的边界。

为了得到圆边界上的点的 x,y，我进一步求解这个方程..

Cos Q * radius = Adj

Cos Q * radius = x //adj is x

对于你...

SOH
Sin Q = Opp/Hyp
Sin Q = Opp/radius
Sin Q * radius = Opp
Sin Q * radius = y

所以

x = Cos Q * radius
y = Sin Q * radius

or in js..

var x = Math.cos(angle) * radius;
var y = Math.sin(angle) * radius;

现在我们有了沿着圆边界的点。但为了得到我们想要的直线，我们需要两个点。

这段代码只是简单地输入了一个更大的半径，这给出了更大的圆，这给出了我们需要的第二个点。

 ctx.lineTo(
        centerX + Math.sin(angle) * (radius + width),
        centerY + Math.cos(angle) * (radius + width));

代码格式清晰:

var centerX = 200,
    centerY = 200,
    radius = 100,
    width = 15,
    angles = [],
    ctx = document.getElementById("canvas").getContext("2d");

function draw() {
    var angle;

    for (var i = 0; i < 180; i += 10) {

        angle = 2.1 + (i * Math.PI / 90);

        ctx.beginPath();

        ctx.moveTo(
        centerX + Math.sin(angle) * radius,
        centerY + Math.cos(angle) * radius);

        ctx.lineTo(
        centerX + Math.sin(angle) * (radius + width),
        centerY + Math.cos(angle) * (radius + width));

        ctx.closePath();
        ctx.stroke();
    }

}

draw();