Javascript html5画布在圆圈中绘制线条

我在用html5画布画圆圈时遇到了一些问题。 我想让酒吧看起来像这样

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（'2d'）；
var棒=50；
var半径=100；
对于（变量i=0；i

---

不知什么原因，我的台词都是歪歪扭扭的。在这件事上我真的需要帮助

检查你的代码笔，找出问题出在

度到弧度之间

这是您代码的更新链接

PS我只看了圆圈的形状，而不是条形图的对齐方式：D

修正问题：

Math.cos

想要弧度，而不是度

我们需要从0到360，所以我调整了条数，使之更容易，并将

I

乘以6（因此最大值为60*6==360）

如果我们在绘制条形图时不添加

+90

，我们只会得到一个圆

---

处理这种可视化的最简单方法是处理上下文的转换矩阵

你需要理解它，就像你手里拿着一张纸一样。 不要试图以正确的角度画线，而是旋转纸张，始终以相同的方向画线

这样，绘图方法中所需的只是每个条的角度和高度

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（'2d'）；
//整个事情的位置
var circleX=canvas.width/2；
var circleY=canvas.height/2；
//
var棒=50；
var-barWidth=5；
//内半径
var半径=50；
ctx.fillStyle=“黄色”；
//不需要使用度，一个完整的圆只有2π
对于（变量i=0；i

canvas#canvas{
背景：黑色；
}

---

其中唯一的代码对我也有帮助，但我选择了另一个，因为它使用了相同的现有代码。非常感谢。你给我的纸上类比对我帮助很大。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var bars = 50;
var radius = 100;
for(var i = 0; i < bars; i++){
  var x = radius*Math.cos(i);
  var y = radius*Math.sin(i);
  draw_rectangle(x+200,y+200,1,13,i, ctx );
}


function draw_rectangle(x,y,w,h,deg, ctx){
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(degrees_to_radians(deg));
  ctx.fillStyle = "yellow";
  ctx.fillRect(-1*(w/2), -1*(h/2), w, h);
  ctx.restore();
}
function degrees_to_radians(degrees){
  return degrees * Math.PI / 180;
}
function radians_to_degrees(radians){
  return radians * 180 / Math.PI;
};