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

}

任何人都可以告诉我这是什么问题 .