圆与椭圆

一个单位圆的方程是 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：

function drawWithLine( v ) {
    ctx.beginPath();
    
    ctx.moveTo( v[0], v[1] );
    for( let i = 1; i <= v.numItems; i++ ) {
        ctx.lineTo( v[ i * 2 ], v[ i * 2 + 1 ] );
    }
    ctx.stroke();
    
    ctx.closePath();
}

然后计算出圆上的各点（注意点的顺序）

// calcVertex() {
    let seg = this.seg;
    let r   = this.r;
    let ox, oy;
    
    let vertex = [];
    vertex.itemSize = 2;

    for( let i = 0; i <= seg; i++ ) {
        ox = Math.cos( 2 * Math.PI * i / seg ) * r;
        oy = Math.sin( 2 * Math.PI * i / seg ) * r;
        vertex.push( ox, oy );
    }

    vertex.numItems = vertex.length / vertex.itemSize;
    this.vertex = vertex;
    return this;
// }

将计算出来的点传入 drawWithLine 函数中，就能得到上述图形。

那么如果我们想要绘制椭圆呢，对于一个方程为   X² + XY + Y² = 1 的椭圆，我想到的方法是将 Y 表示成 X 的函数，根据 X 的可能取值逐个计算对应的 Y 值，

但是由于 Y 的最高次为 2 次，计算出的 Y 值可能是正值或负值，必须将这两种符号的值分开绘制，否则使用 drawWithLine 方法绘制的椭圆会很奇怪，计算椭圆的顶点：

// testOval() {
    const radius = 10000;
    const xMax = Math.sqrt( 4 / 3 * radius );
    const xMin = - xMax;
    const seg = 100;
    const segLength = xMax * 2 / seg;
    let x, y;
    let vertex = [];
    vertex.itemSize = 2;
    for( let i = 0; i <= seg; i++ ) {
        x = xMin + segLength * i;
        y = Math.sqrt( radius - 0.75 * x * x ) - 0.5 * x;
        vertex.push( x, y );
    }
    for( let i = 0; i <= seg; i++ ) {
        x = xMax - segLength * i;
        y = - Math.sqrt( radius - 0.75 * x * x ) - 0.5 * x;
        vertex.push( x, y );
    }
    vertex.numItems = vertex.length / vertex.itemSize;
    this._testVertex = vertex;
// }

 

 wiki 百科上对椭圆的介绍：

如果我们使用 X² + XY + Y² = 1 的系数矩阵 A' = [ 1, 0.5; 0.5; 1 ] 对已经得到的圆（半径为 100 个像素）上各点坐标进行一个坐标变换，得到的图形并没有与前面生成的那个椭圆重合（下方的红色椭圆）：

但是如果我们把系数矩阵中的值进行调整的话，比如调整成：[ 1.12, 0.3; 0.3, 1.12 ]，（注意到这个位置，第 1 个系数要和第 4 个系数相同，第 2 个系数和第 3 个系数相同）那么经过矩阵变换后得到的椭圆与蓝色的椭圆重合度非常高：

如果只是从圆想得到一个任意平移和旋转的椭圆，可以尝试先将单位圆上的 X 坐标进行矩阵变换，然后对每一个顶点进行矩阵平移和旋转的操作，就可以得到一个任意的椭圆。

如果把 [ 1.12, 0.3; 0.3, 1.12 ] 看成是 [ acos(θ), -bsin(θ); bsin(θ), acos(θ) ]，对圆上的坐标进行变换，那么似乎有点道理。

对于其中的具体细节，目前还不了解，以后再继续研究吧。

完整代码：https://github.com/BriFuture/blog-code-example/tree/master/18-06to09/canvas2d/

示例： https://brifuture.github.io/blog-code-example/18-06to09/canvas2d/canvas2d.html

参考

 https://zh.wikipedia.org/zh-hans/%E6%A4%AD%E5%9C%86