使用HTML5畫布繪製圓形部分 - Math.PI

我希望我有時間來調試此&調查寫出此問題時彈出的可能答案，但我一定會盡快這樣做;）使用HTML5畫布繪製圓形部分 - Math.PI

對我的實際問題：我想繪製一個圓形的彎曲形狀，但我不明白，如果這是一個愚蠢的錯誤或從象限處理需要的哭泣（NB：我很新到那些; p）

從我可以告訴，代碼'似乎工作'罰款的單一形狀，但它從當循環運行時構建形狀時出現了問題：/

0對於一個形狀工作

代碼（僅在這個位置&可能;））

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<canvas id="myCanvas2" width="300" height="300" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 
<script> 
 
var graphValues = [1, 2, 3, 4, 5]; 
 

 
var c = document.getElementById("myCanvas2"); 
 
var ctx = c.getContext("2d"); 
 

 

 
// setup circle 
 
// now onto drawing lines & stuff on a circle 
 
var inner_radius = 20; 
 
var radius = 80; 
 
var point_size = 4; 
 
var center_x = c.width/2; 
 
var center_y = c.height/2; 
 
var font_size = "20px"; 
 

 
// draw the circle 
 
function drawCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
drawCircle(); 
 

 
// draw the inner circle 
 
function drawInnerCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, inner_radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
drawInnerCircle(); 
 

 

 
var horiStep360 = 360/graphValues.length-1; // way A 
 
var step360 = 0; 
 

 
// another helper to draw lines from the outer part of the circle to the center 
 
function drawCurvedSection(angle){ 
 
    var nextAngle = angle + horiStep360; 
 

 
    var innerCircle_start_x = center_x + inner_radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var innerCircle_start_y = center_y + inner_radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var innerCircle_end_x = center_x + inner_radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var innerCircle_end_y = center_y + inner_radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 

 
    var outerCircle_start_x = center_x + radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var outerCircle_start_y = center_y + radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var outerCircle_end_x = center_x + radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var outerCircle_end_y = center_y + radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 

 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, inner_radius, angle, nextAngle); 
 
    
 
    ctx.arc(center_x, center_y, radius, angle, nextAngle); 
 
    
 
    ctx.closePath(); 
 
    ctx.strokeStyle = 'blue'; 
 
    ctx.stroke(); 
 
    // TODO: fill with random/diff color 
 
} 
 

 

 
//step360 = 0; // reset before reuse 
 
/* 
 
graphValues.forEach(function(val){ 
 
    //drawPoint(180 - step360, 1, val); // way A reverse (draw counterclockwise) 
 
    //drawPoint(step360, 1, val); // way A 
 
    drawCurvedSection(step360); 
 
    step360 += horiStep360; 
 
}); 
 
*/ 
 
//drawCurvedSection(step360); 
 

 

 

 
var nextAngle = step360 + horiStep360; 
 

 
ctx.beginPath(); 
 

 
//ctx.arc(center_x, center_y, inner_radius, -step360, Math.PI-nextAngle); // PAIR A - original 
 
ctx.arc(center_x, center_y, inner_radius, nextAngle*Math.PI/180, step360, true); 
 
ctx.arc(center_x, center_y, radius, -step360, Math.PI-nextAngle); // PAIR A 
 

 

 
// randomized color 
 
ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.fill(); 
 
</script> 
 

 
</body> 
 
</html>

代碼仍然是WIP：/ ..

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<canvas id="myCanvas2" width="300" height="300" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 
<script> 
 
var graphValues = [1, 2, 3, 4, 5]; 
 

 
var c = document.getElementById("myCanvas2"); 
 
var ctx = c.getContext("2d"); 
 

 

 
// setup circle 
 
// now onto drawing lines & stuff on a circle 
 
var inner_radius = 20; 
 
var radius = 80; 
 
var point_size = 4; 
 
var center_x = c.width/2; 
 
var center_y = c.height/2; 
 
var font_size = "20px"; 
 

 
// draw the circle 
 
function drawCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
drawCircle(); 
 

 
// draw the inner circle 
 
function drawInnerCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, inner_radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
drawInnerCircle(); 
 

 

 
var horiStep360 = 360/graphValues.length-1; // way A 
 
var step360 = 0; 
 

 
// another helper to draw lines from the outer part of the circle to the center 
 
function drawCurvedSection(angle){ 
 
    var nextAngle = angle + horiStep360; 
 

 
    /* 
 
    var innerCircle_start_x = center_x + inner_radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var innerCircle_start_y = center_y + inner_radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var innerCircle_end_x = center_x + inner_radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var innerCircle_end_y = center_y + inner_radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 

 
    var outerCircle_start_x = center_x + radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var outerCircle_start_y = center_y + radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var outerCircle_end_x = center_x + radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var outerCircle_end_y = center_y + radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 
    */ 
 

 
    ctx.beginPath(); 
 
    /* 
 
    ctx.arc(center_x, center_y, inner_radius, angle, nextAngle); 
 
    ctx.arc(center_x, center_y, radius, angle, nextAngle); 
 
    */ 
 
    ctx.arc(center_x, center_y, inner_radius, -step360, -Math.PI-nextAngle, true); // false :/ 
 
    ctx.arc(center_x, center_y, radius, -step360, Math.PI-nextAngle); // good ? 
 
    
 
    ctx.closePath(); 
 
    //ctx.strokeStyle = 'blue'; 
 
    //ctx.stroke(); 
 
    // TODO: fill with random/diff color 
 
    ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
    ctx.fill(); 
 
} 
 

 

 
//step360 = 0; // reset before reuse 
 

 
graphValues.forEach(function(val){ 
 
    //drawPoint(180 - step360, 1, val); // way A reverse (draw counterclockwise) 
 
    //drawPoint(step360, 1, val); // way A 
 
    drawCurvedSection(step360); 
 
    step360 += horiStep360; 
 
}); 
 
//drawCurvedSection(step360); 
 

 

 
/* 
 
var nextAngle = step360 + horiStep360; 
 
ctx.beginPath(); 
 
//ctx.arc(center_x, center_y, inner_radius, -step360, Math.PI-nextAngle); // PAIR A - original 
 
ctx.arc(center_x, center_y, inner_radius, nextAngle*Math.PI/180, step360, true); 
 
ctx.arc(center_x, center_y, radius, -step360, Math.PI-nextAngle); // PAIR A 
 
// randomized color 
 
ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.fill(); 
 
*/ 
 
</script> 
 

 
</body> 
 
</html>

這就是說，我會嘗試在我身邊，但我打賭我必須做一些測試，然後纔算出來（並知道它爲什麼會發生故障&如何解決它:)）

希望所有的S.O.讀者一個非常好的&晴天;） +

- 編輯 -

快速測試講明什麼需要可以使用，但不是爲什麼它不工作 - 我希望它會明確很快（。目前它繪製五角星：/） - >我的問題是，究竟是什麼約（除了知道它我的代碼是錯誤的一些其他點（S）：

ctx.arc(100, 75, 50, (Math.PI*2/360)*<theAngle>, (Math.PI*2/360)*<theNextAngle>);

（燁，那對我來說很愚蠢，但現在我知道了^^）

example attached below hosted on w3schools editor

下面的代碼片段表明，它似乎工作「manuallly」描邊，但我沒有與形狀尚未檢查（..）

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 
<script> 
 

 
var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.arc(100, 75, 50, (Math.PI*2/360)*0, (Math.PI*2/360)*72); 
 
ctx.strokeStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.stroke(); 
 

 
ctx.beginPath(); 
 
ctx.arc(100, 75, 50, (Math.PI*2/360)*72, (Math.PI*2/360)*144); 
 
ctx.strokeStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.stroke(); 
 

 
ctx.beginPath(); 
 
ctx.arc(100, 75, 50, (Math.PI*2/360)*144, (Math.PI*2/360)*216); 
 
ctx.strokeStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.stroke(); 
 

 
ctx.beginPath(); 
 
ctx.arc(100, 75, 50, (Math.PI*2/360)*216, (Math.PI*2/360)*288); 
 
ctx.strokeStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.stroke(); 
 

 
ctx.beginPath(); 
 
ctx.arc(100, 75, 50, (Math.PI*2/360)*288, (Math.PI*2/360)*360); 
 
ctx.strokeStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.stroke(); 
 
</script> 
 

 
</body> 
 
</html>

來源

2017-05-29 StephaneAG

你什麼缺少的是函數的最後一個參數ctx.arc

ctx.arc(x,y,radius,startAngle, endAngle, direction);

方向如果爲true則表示逆時針繪製弧，否則爲逆時針方向繪製。

所以，如果你從內弧畫到外面，你需要逆時針順時針轉。

如

const ctx = canvas.getContext("2d"); 
 
const cols = [ 
 
    "hsl(0,100%,50%)", 
 
    "hsl(40,100%,50%)", 
 
    "hsl(70,100%,50%)", 
 
    "hsl(100,100%,50%)", 
 
    "hsl(150,100%,50%)", 
 
    "hsl(250,100%,50%)", 
 
]; 
 
var startAng = 0; 
 
var endAng = 1; 
 
var innerRad = 50; 
 
var outerRad = 100; 
 
ctx.lineWidth = 3; 
 
ctx.lineJoin = "round"; 
 
ctx.strokeStyle = "black"; 
 
function drawSlice(x,y,start,end,innerRad,outerRad,col){ 
 
    ctx.fillStyle = col; 
 
    ctx.beginPath(); 
 
    ctx.arc(x,y,innerRad,end,start,true); 
 
    ctx.arc(x,y,outerRad,start,end,false); 
 
    ctx.closePath(); // to close path for stroke command 
 
    ctx.fill(); 
 
    ctx.stroke(); 
 
} 
 
var count = 0; 
 
for(var i = 0; count < cols.length; i += 1){ 
 
    drawSlice(200,200,i,i+0.9,innerRad,outerRad,cols[count++]) 
 

 
}

<canvas id=canvas width= 400 height = 400></canvas>

來源

2017-05-29 15:55:36 Blindman67

我看你還是編輯你的答案 - >謝謝老兄:) 另外，讓我改進我的問題：因爲默認情況下，最後一個參數的ctx.arc fcn是假的，在下面的代碼中需要更改以使其工作？ 'ctx.arc（center_x，center_y，inner_radius，-step360，-Math.PI-nextAngle，true）; //需要修復' 'ctx.arc（center_x，center_y，radius，-step360，Math.PI-nextAngle）;' – StephaneAG

@StephaneAG開始角度和結束角度需要位於正確的位置。在答案中注意開始和結束角度交換。此外角度是絕對角度（對我來說-step360看起來像是它的偏移量，但可能是錯誤的）。所以如果最後的參數是真的，那麼它來自ang1？逆時針對ang2？如果它從ang1錯誤？順時針旋轉到ang2以獲得弧度（x，y，rad，ang1，ang2' – Blindman67

Thx用於快速回復：'var horiStep360 = 360/graphValues.length;'是獲得任意數量的大小相等的部分，'step360'is例如，對於5個值，我們從0°到72°，72°到144°，144°到216°，216°到288°進行比較，並且推導出下一個角度。，最後288°到260° 事情是：我無法使用'angle'和'nextAngle'作爲開始角度和結束角度，適用於每個部分，也就是 'ctx.arc（center_x， center_y，inner_radius，step360 ??，nextAngle ??，true）;' 'ctx.arc（center_x，center_y，radius，step360，nextAngle ??）;' ：/ – StephaneAG

所以，正確的答案是... ...

(..) 
ctx.arc(center_x, center_y, inner_radius, (Math.PI*2/360)*nextAngle, (Math.PI*2/360)*angle, true); 
ctx.arc(center_x, center_y, radius, (Math.PI*2/360)*angle, (Math.PI*2/360)*nextAngle, false); 
(..)

- 編輯 -

爲了更清晰的說明，我忘了在使用它們之前將度數轉換爲弧度：/

var deg = angle; // angle in ° 
var rads = Math.PI/180*deg; // simpler yet same as (Math.PI*2/360)*deg

作爲提醒，在(Math.PI*2/360)*angleDegree是剛開度兩者的角度&的nextAngle，而「特技」是要記住切換參數命令傳遞可選方向參數時。所以，函數調用中所需要的公式爲：

ctx.arc(x, y, rad, (Math.PI*2/360)*2ndAngle, (Math.PI*2/360)*1stangle, true); 
ctx.arc(x, y, outRad, (Math.PI*2/360)*1stangle, (Math.PI*2/360)*2ndAngle, false);

使用行程（），這使它：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<canvas id="myCanvas2" width="300" height="300" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 
<script> 
 
var graphValues = [1, 2, 3, 4, 5]; 
 

 
var c = document.getElementById("myCanvas2"); 
 
var ctx = c.getContext("2d"); 
 

 

 
// setup circle 
 
// now onto drawing lines & stuff on a circle 
 
var inner_radius = 20; 
 
var radius = 80; 
 
var point_size = 4; 
 
var center_x = c.width/2; 
 
var center_y = c.height/2; 
 
var font_size = "20px"; 
 

 
// draw the circle 
 
function drawCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
//drawCircle(); 
 

 
// draw the inner circle 
 
function drawInnerCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, inner_radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
//drawInnerCircle(); 
 

 

 
//var horiStep360 = 360/graphValues.length-1; // made it work when testing single one ?! 
 
var horiStep360 = 360/graphValues.length; // to gett ful 36° per item 
 
// for 5 values: 
 
// 0° -> 72° 
 
// 72° -> 144° 
 
// 144° -> 216° 
 
// 216° -> 288° 
 
// 288° -> 360° 
 
var step360 = 0; 
 

 
// another helper to draw lines from the outer part of the circle to the center 
 
function drawCurvedSection(angle){ 
 
    var nextAngle = angle + horiStep360; 
 
    console.log('current angle: ' + angle + '° & next angle: ' + nextAngle + '°'); 
 

 
    /* 
 
    var innerCircle_start_x = center_x + inner_radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var innerCircle_start_y = center_y + inner_radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var innerCircle_end_x = center_x + inner_radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var innerCircle_end_y = center_y + inner_radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 

 
    var outerCircle_start_x = center_x + radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var outerCircle_start_y = center_y + radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var outerCircle_end_x = center_x + radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var outerCircle_end_y = center_y + radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 
    */ 
 

 
    ctx.beginPath(); 
 
    
 
    //ctx.arc(center_x, center_y, inner_radius, angle, nextAngle); 
 
    //ctx.arc(center_x, center_y, radius, angle, nextAngle); 
 
    //ctx.arc(center_x, center_y, inner_radius, -step360, -Math.PI-nextAngle, true); // false 
 
    //ctx.arc(center_x, center_y, radius, -step360, Math.PI-nextAngle); // good ? 
 
    //ctx.arc(center_x, center_y, inner_radius, -angle, -nextAngle, true); // false 
 
    //ctx.arc(center_x, center_y, radius, -angle, -nextAngle); // good ? 
 
    
 
    // debug 
 
    //ctx.arc(center_x, center_y, inner_radius, angle*Math.PI*2/180, nextAngle*Math.PI*2/180, true); 
 
    //ctx.arc(center_x, center_y, radius, angle*Math.PI*2/180, nextAngle*Math.PI*2/180, false); 
 
    // R: invert the angle & nextAngle AS WELL AS set optional direction parameter !!! -> WORKS !!!! 
 
    ctx.arc(center_x, center_y, inner_radius, (Math.PI*2/360)*nextAngle, (Math.PI*2/360)*angle, true); 
 
    ctx.arc(center_x, center_y, radius, (Math.PI*2/360)*angle, (Math.PI*2/360)*nextAngle, false); 
 
    
 
    ctx.closePath(); 
 
    //ctx.strokeStyle = 'blue'; 
 
    ctx.strokeStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
    ctx.stroke(); 
 
    // TODO: fill with random/diff color 
 
    //ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
    //ctx.fill(); 
 
} 
 

 

 
//step360 = 0; // reset before reuse 
 

 
graphValues.forEach(function(val){ 
 
    //drawPoint(180 - step360, 1, val); // way A reverse (draw counterclockwise) 
 
    //drawPoint(step360, 1, val); // way A 
 
    drawCurvedSection(step360); 
 
    step360 += horiStep360; 
 
}); 
 

 
//drawCurvedSection(step360); - to be called manually to step through & see where/why glitch begins 
 
function debugDrawCurvedSection(){ 
 
    drawCurvedSection(step360); 
 
    step360 += horiStep360; 
 
} 
 
//debugDrawCurvedSection(); // ok .. 
 
//debugDrawCurvedSection(); // fucked up 
 
//debugDrawCurvedSection(); 
 

 
/* 
 
var nextAngle = step360 + horiStep360; 
 
ctx.beginPath(); 
 
//ctx.arc(center_x, center_y, inner_radius, -step360, Math.PI-nextAngle); // PAIR A - original 
 
ctx.arc(center_x, center_y, inner_radius, nextAngle*Math.PI/180, step360, true); 
 
ctx.arc(center_x, center_y, radius, -step360, Math.PI-nextAngle); // PAIR A 
 
// randomized color 
 
ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.fill(); 
 
*/ 
 

 
// manual tests 
 
/* 
 
ctx.beginPath(); 
 
ctx.arc(center_x, center_y, inner_radius, 0, 2, true); 
 
ctx.arc(center_x, center_y, radius, 0, 2, false); 
 
// randomized color 
 
ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.fill(); 
 
*/ 
 
</script> 
 

 
</body> 
 
</html>

使用填（），這使它：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<canvas id="myCanvas2" width="300" height="300" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 
<script> 
 
var graphValues = [1, 2, 3, 4, 5]; 
 

 
var c = document.getElementById("myCanvas2"); 
 
var ctx = c.getContext("2d"); 
 

 

 
// setup circle 
 
// now onto drawing lines & stuff on a circle 
 
var inner_radius = 20; 
 
var radius = 80; 
 
var point_size = 4; 
 
var center_x = c.width/2; 
 
var center_y = c.height/2; 
 
var font_size = "20px"; 
 

 
// draw the circle 
 
function drawCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
//drawCircle(); 
 

 
// draw the inner circle 
 
function drawInnerCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(center_x, center_y, inner_radius, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 
} 
 
//drawInnerCircle(); 
 

 

 
//var horiStep360 = 360/graphValues.length-1; // made it work when testing single one ?! 
 
var horiStep360 = 360/graphValues.length; // to gett ful 36° per item 
 
// for 5 values: 
 
// 0° -> 72° 
 
// 72° -> 144° 
 
// 144° -> 216° 
 
// 216° -> 288° 
 
// 288° -> 360° 
 
var step360 = 0; 
 

 
// another helper to draw lines from the outer part of the circle to the center 
 
function drawCurvedSection(angle){ 
 
    var nextAngle = angle + horiStep360; 
 
    console.log('current angle: ' + angle + '° & next angle: ' + nextAngle + '°'); 
 

 
    /* 
 
    var innerCircle_start_x = center_x + inner_radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var innerCircle_start_y = center_y + inner_radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var innerCircle_end_x = center_x + inner_radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var innerCircle_end_y = center_y + inner_radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 

 
    var outerCircle_start_x = center_x + radius * Math.cos(-angle*Math.PI/180) * 1; 
 
    var outerCircle_start_y = center_y + radius * Math.sin(-angle*Math.PI/180) * 1; 
 
    
 
    var outerCircle_end_x = center_x + radius * Math.cos(-nextAngle*Math.PI/180) * 1; 
 
    var outerCircle_end_y = center_y + radius * Math.sin(-nextAngle*Math.PI/180) * 1; 
 
    */ 
 

 
    ctx.beginPath(); 
 
    
 
    //ctx.arc(center_x, center_y, inner_radius, angle, nextAngle); 
 
    //ctx.arc(center_x, center_y, radius, angle, nextAngle); 
 
    //ctx.arc(center_x, center_y, inner_radius, -step360, -Math.PI-nextAngle, true); // false 
 
    //ctx.arc(center_x, center_y, radius, -step360, Math.PI-nextAngle); // good ? 
 
    //ctx.arc(center_x, center_y, inner_radius, -angle, -nextAngle, true); // false 
 
    //ctx.arc(center_x, center_y, radius, -angle, -nextAngle); // good ? 
 
    
 
    // debug 
 
    //ctx.arc(center_x, center_y, inner_radius, angle*Math.PI*2/180, nextAngle*Math.PI*2/180, true); 
 
    //ctx.arc(center_x, center_y, radius, angle*Math.PI*2/180, nextAngle*Math.PI*2/180, false); 
 
    // R: invert the angle & nextAngle AS WELL AS set optional direction parameter !!! -> WORKS !!!! 
 
    ctx.arc(center_x, center_y, inner_radius, (Math.PI*2/360)*nextAngle, (Math.PI*2/360)*angle, true); 
 
    ctx.arc(center_x, center_y, radius, (Math.PI*2/360)*angle, (Math.PI*2/360)*nextAngle, false); 
 
    
 
    ctx.closePath(); 
 
    //ctx.strokeStyle = 'blue'; 
 
    //ctx.strokeStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
    //ctx.stroke(); 
 
    // TODO: fill with random/diff color 
 
    ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
    ctx.fill(); 
 
} 
 

 

 
//step360 = 0; // reset before reuse 
 

 
graphValues.forEach(function(val){ 
 
    //drawPoint(180 - step360, 1, val); // way A reverse (draw counterclockwise) 
 
    //drawPoint(step360, 1, val); // way A 
 
    drawCurvedSection(step360); 
 
    step360 += horiStep360; 
 
}); 
 

 
//drawCurvedSection(step360); - to be called manually to step through & see where/why glitch begins 
 
function debugDrawCurvedSection(){ 
 
    drawCurvedSection(step360); 
 
    step360 += horiStep360; 
 
} 
 
//debugDrawCurvedSection(); // ok .. 
 
//debugDrawCurvedSection(); // fucked up 
 
//debugDrawCurvedSection(); 
 

 
/* 
 
var nextAngle = step360 + horiStep360; 
 
ctx.beginPath(); 
 
//ctx.arc(center_x, center_y, inner_radius, -step360, Math.PI-nextAngle); // PAIR A - original 
 
ctx.arc(center_x, center_y, inner_radius, nextAngle*Math.PI/180, step360, true); 
 
ctx.arc(center_x, center_y, radius, -step360, Math.PI-nextAngle); // PAIR A 
 
// randomized color 
 
ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.fill(); 
 
*/ 
 

 
// manual tests 
 
/* 
 
ctx.beginPath(); 
 
ctx.arc(center_x, center_y, inner_radius, 0, 2, true); 
 
ctx.arc(center_x, center_y, radius, 0, 2, false); 
 
// randomized color 
 
ctx.fillStyle = '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6); 
 
ctx.fill(); 
 
*/ 
 
</script> 
 

 
</body> 
 
</html>

謝謝大家，我希望這可以幫助別人:)

來源

2017-05-29 17:50:34 StephaneAG

使用HTML5畫布繪製圓形部分 - Math.PI

回答

相關問題