画一个尽量圆的圆

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

这篇文章来水一个画多少边合适的问题。(注:我并不是不知道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();
}

 



本文发布于 https://luojia.me

本站文章未经文下加注授权不得拷贝发布。

本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。