使用 Javascript 数学在圆形图案中创建破折号

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 轴一样。为什么它不在轴上？为什么是斜的？

Answer 1

你引用的代码有点尴尬。

要围绕一个圆圈导航，将 i 从 0 增加到 360（如 360 度）会更清楚。

for(var i=0; i<360; i++){

相反，编码器从 0 增加到 180，但随后他们通过将度数转换为弧度的公式加倍来补偿将 360 度减半。

// this is the usual conversion of degrees to radians
var radians = degrees * Math.PI / 180;

// This "compensating" conversion is used by the coder
// This doubling of the conversion compensates for halving "i" to 180
var radians = degrees * Math.PI / 90;

迭代的更清晰的因式分解看起来像这样：

// the conversion factor to turn degrees into radians
var degreesToRadians = Math.PI / 180;

// navigate 360 degrees around a circle
for(var i=0; i<360; i++){

    // use the standard degrees-to-radians conversion factor
    var angle = i * degreesToRadians;

    // This roughly rotates the angle so that it starts
    // at the 12 o'clock position on the circle
    // This is unnecessary if you're navigating completely
    // around the circle anyway (then it doesn't matter where you start)
    angle += 2.1;

    ....

}

还有...

该代码有意绘制从圆周向外辐射的线。编码器根本没有试图跟随圆周。

Answer 2

让我们从 SOH CAH TOA (link).

开始

给定直角三角形（一侧为 90 度）..

三角形有一个角。
三角形有一条边与该角 (O) 相反。
三角形有边同时与角和直角相交，称为(A)相邻边。
三角形有一条边叫做斜边 (H)。这是也接触角度但不与对边成直角的一侧。

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

例如： 你知道角度 Q 是 40 度，斜边是 10。那么什么是相邻的；

正在查看 SOH CAH TOA。我看到我知道 H，并且需要知道 A。CAH 两者都有。所以我选择CAH

Cos Q = Adj/Hyp

现在如果你把这个三角形放在圆里面。然后 Hyp 将变成半径，像这样：

Cos Q = Adj/radius

现在要从圆圈向外画线，我需要知道直线的起点和终点，并且我需要使这些点与圆角对齐。

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

所以为了得到圆边界上的点的 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();

使用 Javascript 数学在圆形图案中创建破折号

Creating dashes in a pattern of a circle using Javascript Math

javascript

math

loops

trigonometry

canvas