使用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作爲y座標，而使用sin作爲y座標。它看起來不像作者使用它，就像我剛剛描述的那樣。你能否詳細說明一下。

任何幫助，將不勝感激！

編輯：我也想知道，當我們使用for(var i = 0; i < 180; i += 10){我們就得到了一個完整的圓破折號，當我做i < 90我們得到了一個半圈，但半圈不直像針對x或y軸的上一個角度。爲什麼它不在軸上？爲什麼它在一個角度？

Answer 1

讓我們從SOH CAH TOA（link）開始。

鑑於直角三角形（一側是90度）..

• 三角具有角度。
• 三角形有一個相反的一面（O）。
• 三角形有觸及角度和直角的一面，稱爲（A）相鄰面。
• 三角形有一個叫做hypopenuse的一面（H）。這也是接觸角度的一面，但不會與相反的一面形成直角。

我們找到你所需要知道的最小角和1個另一面任何副作用。

例如：你知道角度Q是40deg和Hypotenuse是10.那麼什麼是Adjacent;

看着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 

&爲Y ...

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(); 

Answer 2

你引用的代碼有點尷尬。

要圍繞一個圓周導航，將從0到360（如360度）增加i會更清楚。

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; 

    .... 

} 

而且......

代碼是故意繪製輻射從圓圈周長走線。編碼器根本不會嘗試跟蹤周長。