在HTML5 Canvas中绘制圆形分布条形遇到问题，求解决方案

我来帮你搞定这个Canvas绘制圆形分布条形的问题！你当前的代码主要是角度计算逻辑错误，导致条形分布不符合预期，下面我会一步步帮你修正：

问题分析 #

1. 你直接用循环变量i传给Math.cos()和Math.sin()，但这些方法接收的是弧度值，而且50个条形需要均匀分布在360°（也就是2π弧度）的圆周上，直接用i会导致角度完全混乱。
2. 绘制矩形的平移和旋转逻辑也绕远了，应该先把画布原点移到圆心，再旋转角度，这样绘制条形的逻辑会更清晰。

修正后的完整代码 #

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext('2d'); 
var bars = 50; 
var radius = 100;
// 圆心坐标，方便后续调整
var centerX = 200;
var centerY = 200;

// 补充你代码里缺失的角度转弧度函数
function degrees_to_radians(deg) {
    return deg * Math.PI / 180;
}

function draw_bar(ctx, barWidth, barLength, angle) {
    ctx.save();
    // 先把画布原点平移到圆心位置
    ctx.translate(centerX, centerY);
    // 旋转到当前条形对应的角度
    ctx.rotate(angle);
    // 从圆心(0,0)向外绘制条形：宽度1，长度等于半径
    ctx.fillRect(0, 0, barWidth, barLength);
    ctx.restore();
}

for(var i = 0; i < bars; i++){ 
    // 计算每个条形的弧度：均匀平分整个圆周
    var angle = (2 * Math.PI / bars) * i;
    draw_bar(ctx, 1, radius, angle);
}

关键调整说明 #

• 角度计算：用(2 * Math.PI / bars) * i来计算每个条形的弧度，确保50个条形完美均匀分布在360°圆周上。
• 绘制逻辑优化：先平移到圆心，再旋转角度，然后从(0,0)开始绘制矩形，这样矩形会沿着旋转后的方向从圆心延伸到圆周，完全符合你想要的圆形分布效果。
• 灵活调整样式：如果想让条形从圆周向内延伸，只需要把fillRect的参数改成ctx.fillRect(0, -radius, 1, radius)即可；如果要改变条形颜色，在draw_bar里添加ctx.fillStyle = "#yourColor";就行。

内容的提问来源于stack exchange，提问作者Plixxer