java 畫圓指定半徑_HTML5畫布 - 圓環圖的半徑大于輸入值

我正在嘗試使用Html5畫布實作甜甜圈圖表 . 問題是甜甜圈的半徑比我給的更多 .

我将以下值 dmbChart(125,125,100,25,values,colors,labels,0); 傳遞給函數 dmbChart(cx,cy,radius,arcwidth,values,colors,labels,selectedValue) ，其中cx和cy是X和Y軸的圓心 . 我正在買一個半徑更大的甜甜圈 .

當我将值 dmbChart(100,100,100,25,values,colors,labels,0); 傳遞給函數時，甜甜圈應該觸摸兩側的Div容器，因為從容器到圓心的100px寬度和高度間隙等于圓環圖的半徑 . 但它走出了Div .

Html代碼：

JavaScript代碼：

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

var colors=['green','orange'];

var values=[47,53];

var labels=['Completed','Pending'];

dmbChart(125,125,100,25,values,colors,labels,0);

function dmbChart(cx,cy,radius,arcwidth,values,colors,labels,selectedValue){

var tot=0;

var accum=0;

var PI=Math.PI;

var PI2=PI*2;

var offset=-PI/2;

ctx.lineWidth=arcwidth;

for(var i=0;i

for(var i=0;i

ctx.beginPath();

ctx.arc(cx,cy,radius,

offset+PI2*(accum/tot),

offset+PI2*((accum+values[i])/tot)

);

ctx.strokeStyle=colors[i];

ctx.stroke();

accum+=values[i];

}

var innerRadius=79;

ctx.beginPath();

ctx.arc(cx,cy,innerRadius,0,PI2);

ctx.fillStyle=colors[selectedValue];

ctx.fill();

ctx.textAlign='center';

ctx.textBaseline='bottom';

ctx.fillStyle='white';

ctx.font=(60)+'px verdana';

ctx.fillText(values[selectedValue],cx,cy+innerRadius*.7);

ctx.font=(20)+'px verdana';

ctx.fillText(labels[selectedValue],cx,cy-innerRadius*.25);

}

任何人都可以告訴我這是什麼問題 .