Javascript 使用HTML5画布绘制圆形部分-Math.PI

我希望我有时间调试这个问题&调查写这个问题时可能出现的答案，但我肯定会尽快这么做；）

关于我的实际问题： 我试图沿着一个圆绘制曲线形状，但我不知道这是一个愚蠢的错误，还是因为需要处理象限（注：我对这些很陌生；p）

据我所知，代码“似乎适用于”单个形状，但在从循环运行以构建形状时会出错：/

适用于一个形状的代码（&可能仅在此位置；））

您的浏览器不支持HTML5画布标记。
var GraphValue=[1,2,3,4,5]；
var c=document.getElementById（“myCanvas2”）；
var ctx=c.getContext（“2d”）；
//安装圈
//现在开始画线&画圆
var内半径=20；
var半径=80；
变量点大小=4；
var center_x=c.宽度/2；
var center_y=c.高度/2；
var font_size=“20px”；
//画圆圈
函数drawCircle（）{
ctx.beginPath（）；
弧（中心x，中心y，半径，0，2*Math.PI）；
ctx.stroke（）；
}
画圈（）；
//画内圈
函数drawInnerCircle（）{
ctx.beginPath（）；
弧（中心x，中心y，内半径，0，2*Math.PI）；
ctx.stroke（）；
}
drawInnerCircle（）；
var horiStep360=360/graphValues.length-1；//路A
var step360=0；
//从圆的外部到圆心绘制线的另一个辅助对象
函数drawCurvedSection（角度）{
var nextAngle=角度+水平360；
var innerCircle_start_x=中心_x+内半径*Math.cos（-angle*Math.PI/180）*1；
var innerCircle_start_y=中心_y+内半径*数学sin（-angle*数学PI/180）*1；
var innerCircle_end_x=中心_x+内半径*Math.cos（-nextAngle*Math.PI/180）*1；
var innerCircle_end_y=中心_y+内半径*Math.sin（-nextAngle*Math.PI/180）*1；
var outerCircle_start_x=中心_x+半径*Math.cos（-angle*Math.PI/180）*1；
var outerCircle_start_y=中心_y+半径*Math.sin（-angle*Math.PI/180）*1；
var outerCircle_end_x=中心_x+半径*Math.cos（-nextAngle*Math.PI/180）*1；
var outerCircle_end_y=中心_y+半径*Math.sin（-nextAngle*Math.PI/180）*1；
ctx.beginPath（）；
ctx.弧（中心x、中心y、内半径、角度、角）；
ctx.弧（中心x，中心y，半径，角度，角）；
ctx.closePath（）；
ctx.strokeStyle='蓝色'；
ctx.stroke（）；
//TODO:使用随机/差异颜色填充
}
//步骤360=0；//重新使用前重置
/*
graphValues.forEach（函数（val）{
//绘图点（180-步长360，1，val）；//反向（逆时针绘图）
//支点（step360，1，val）；//路径A
绘制曲线剖面（步骤360）；
step360+=horiStep360；
});
*/
//绘制曲线剖面（步骤360）；
var nextAngle=step360+horiStep360；
ctx.beginPath（）；
//ctx.弧（中心x，中心y，内半径，-step360，数学πnextAngle）；//A对-原件
ctx.弧（中心x，中心y，内半径，nextAngle*Math.PI/180，步长360，真）；
ctx.弧（中心x，中心y，半径，-step360，数学πnextAngle）；//配对A
//随机颜色
ctx.fillStyle='#'+（“000000”+Math.random（）.toString（16）.slice（2,8）.toUpperCase（））.slice（-6）；
ctx.fill（）；

缺少的是函数ctx.arc的最后一个参数

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

方向如果为真，则指示逆时针绘制圆弧；如果为假，则指示顺时针绘制圆弧

所以，若你们从内弧向外画，你们需要逆时针，然后顺时针

乙二醇

const ctx=canvas.getContext（“2d”）；
常数cols=[
“hsl（0100%，50%）”，
“hsl（40100%，50%）”，
“hsl（70100%，50%）”，
“hsl（100100%，50%）”，
“hsl（150100%，50%）”，
“hsl（250100%，50%）”，
];
var-startAng=0；
var endAng=1；
var=50；
var-outerRad=100；
ctx.lineWidth=3；
ctx.lineJoin=“圆形”；
ctx.strokeStyle=“黑色”；
函数drawSlice（x、y、开始、结束、内弧线、外弧线、列）{
ctx.fillStyle=col；
ctx.beginPath（）；
弧（x，y，innerRad，end，start，true）；
弧（x，y，外层，起始，结束，假）；
ctx.closePath（）；//关闭笔划命令的路径
ctx.fill（）；
ctx.stroke（）；
}
var计数=0；
对于（变量i=0；计数

---

因此，正确的答案是

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

只是获取角度和下一个角度的度数，而“技巧”是在传递可选方向参数时记住切换参数顺序。 因此，函数调用中需要的公式是：

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

使用stroke（），这将呈现：

您的浏览器不支持HTML5画布标记。
var GraphValue=[1,2,3,4,5]；
var c=document.getElementById（“myCanvas2”）；
var ctx=c.getContext（“2d”）；
//安装圈
//现在开始画线&画圆
var内半径=20；
var半径=80；
变量点大小=4；
var center_x=c.宽度/2；
var center_y=c.高度/2；
var font_size=“20px”；
//画圆圈
函数drawCircle（）{
ctx.beginPath（）；
弧（中心x，中心y，半径，0，2*Math.PI）；
ctx.stroke（）；
}
//画圈（）；
//画内圈
函数drawInnerCircle（）{
ctx.beginPath（）；
弧（中心x，中心y，内半径，0，2*Math.PI）；
ctx.stroke（）；
}
//drawInnerCircle（）；
//var horiStep360=360/graphValues.length-1；//在测试单个的时候让它工作了？！
var horiStep360=360/graphValues.length；//每件物品达到36度
//对于5个值：
// 0° -> 72°
// 72° -> 144°
// 144° -> 216°
// 216° -> 288°
// 288° -> 360°
var step360=0；
//从圆的外部到圆心绘制线的另一个辅助对象
函数drawCurvedSection（角度）{
var nextAngle=角度+水平360；
console.log（'当前角度：'+角度+'°和下一个角度：'