Question

我希望圆圈类似于具有相同不同颜色切片的饼图。出于某种原因，我画了一个圆圈，边上有弧线，中间是白色的八边形。

for(var i=0;i<8;i++){
    ctx.beginPath();
    ctx.fillStyle= 'rgb(' + Math.floor(255-42.5*i) + ', 95, 180)';
    ctx.arc(300,300,radius,i*((Math.PI*2)/8),(i+1)*((Math.PI*2)/8)); 
    ctx.fill();
}

Answer 1

问题在于，当您绘制一个小于一个完整圆的圆弧时，它所做的只是创建圆弧，并将其与自身绑定，而不是与中心绑定。但是，如果我们强制它移动到中心，那么它将绘制切片而不是弧形。我创建了一个JSFiddle来演示它。

更新后的代码是

var ctx=document.getElementById("canvas").getContext("2d");
var radius=100;
for(var i=0;i<8;i++){
    ctx.beginPath();
    ctx.fillStyle='rgb(' + Math.floor(255-42.5*i) + ', 95, 180)';
    ctx.moveTo(300,300); //We have to add this, otherwise, it will fill the minimum area needed to fill the arc

    ctx.arc(300,300,radius,i*Math.PI/4,(i+1)*((Math.PI/4)),false); 
    ctx.closePath();
    ctx.fill();
}

在切片中填充javascript圈

1 个答案: