在屏幕上绘制圆的时候实际上就是在画一个正多边形，只是边非常多而已。

这篇文章来水一个画多少边合适的问题。（注：我并不是不知道canvas2d有圆弧绘制函数，这是为下一篇文章准备的内容）

要一个圆的边看起来平滑，就需要边数足够多，直到在屏幕上看不出它有棱角就够了，这里摆一幅图。

只需要让这个limit（随便起的名字）线段尽量短就行了，这条线表示的是圆心到相邻顶点中垂线延伸出去到目标圆弧的长度。

一般来说设为1像素是肯定够用的，在圆半径越大时，这个limit也就可以跟着一起变大，因为半径越大，同样的突出程度（limit）看起来就不会那么尖锐。

这里放一个演示

这是这里面根据半径和limit求出所需边数的方法

function CircleData(R){//R:圆的半径
	let limit=1*ctrlLimit.value;
	let minR=R-limit;//最小半径（随便起的名字，圆心到圆边相邻两点间连线的中垂线长度）
	let avgRad=Math.acos(minR/R);//边缘两点间的弧度
	let pointC=Math.ceil(Math.PI*2/avgRad);//边缘点数,上舍入到整数
	avgRad=Math.PI*2/pointC;//根据点数重算顶点间的弧度
	return [pointC,avgRad];//返回顶点数量和两点间的弧度
}

得到圆的绘制信息后，循环跑一遍所有顶点然后连成线就行了

function cond(rad,r){//返回对应弧度和半径下对应点的坐标
	return [Math.sin(rad)*r,Math.cos(rad)*r];
}
function draw(){
	canvas.width+=0;//重置画布
	ctx.translate(canvas.width/2,canvas.height/2);//绘制原点移动到画布中间
	let R=ctrlR.value;//取一个半径值
	let [pc,avgRad]=CircleData(R);//算出边缘点数和点间弧度
	let rad=0;//起始弧度
	for(var i = pc;pc--;){
		ctx.lineTo(...cond(rad,R));//连线成圆
		rad+=avgRad;
	}
	ctx.closePath();//从最后一个点连到第一个点
	ctx.stroke();
}