圆与椭圆

一个单位圆的方程是 X² + Y² = 1，画在坐标系中：

 

对于圆来说，由于它是高度对称的，旋转属性对它而言意义不大。

在 canvas 画布上绘制一个圆很简单，有两种方法：

1. 使用 html5 中提供的 drawArc API

2. 我们也可以用公式  X² + Y² = 1，将 X 从 -1 到 1 中每个微元 dx 对应的纵坐标一个个算出来，然后再将这些点连接起来，只要切割的足够细，那么绘制出来的图形就越接近圆。

只是需要注意的是对于 1 个 x，可能有两个 Y 值与之对应。

3. 我们也可以换一种坐标方程，使用极坐标来表示单位圆，x = cos(θ), y = sin(θ)。θ 在 [0, 2π) 区间内，对于每一个 θ，有唯一的 x, y。

如果不使用 html5 中的 api，绘图的时候选择极坐标方程进行取点会方便很多。

先定义一个方法 drawWithLine：

 1 function drawWithLine( v ) {
 2     ctx.beginPath();
 3     
 4     ctx.moveTo( v[0], v[1] );
 5     for( let i = 1; i <= v.numItems; i++ ) {
 6         ctx.lineTo( v[ i * 2 ], v[ i * 2 + 1 ] );
 7     }
 8     ctx.stroke();
 9     
10     ctx.closePath();
11 }

View Code