使用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

回答

相关问题