笔记1 - 绘制canvas，按照指定顺序绘制

目前正在学canvas，想用canvas画一个太极图案练练手，大致拆解了下就是下面这种：

• 左右各一个黑/白大的半圆
• 上面右边有个黑色的半圆；下面左边有个白色的半圆
• 上下各一个鱼眼睛

刚开始绘制时没注意绘制顺序。把左侧黑色的大半圆写到后面去导致了上面的鱼眼睛只有右边一半。调试了一会才想起来，可能是后面绘制的黑鱼将鱼眼睛遮住了。 贴上完成的代码：

    <canvas id="c1" width="200" height="200"></canvas>

    const ctx1 = document.getElementById('c1').getContext('2d');

    ctx1.arc(100, 100, 100, 0, Math.PI * 2, true);
    ctx1.stroke();
    // 左侧半个黑大圆
    ctx1.beginPath();
    ctx1.arc(100, 100, 100, -Math.PI / 2, Math.PI / 2, true);
    ctx1.fill();
    // 右侧大的白半圆
    ctx1.beginPath();
    ctx1.fillStyle = '#000';
    ctx1.arc(100, 100, 100, -Math.PI / 2, Math.PI / 2, true);
    ctx1.fill();

    // 右侧小的半个黑圆
    ctx1.beginPath();
    ctx1.fillStyle = 'black';
    ctx1.arc(100, 50, 50, Math.PI / 2, -Math.PI / 2, true);
    ctx1.fill();
    // 左侧突出的小白半圆
    ctx1.beginPath();
    ctx1.fillStyle = '#fff';
    ctx1.arc(100, 150, 50, Math.PI / 2, -Math.PI / 2);
    ctx1.fill();

    // 上面的鱼眼睛（和上面小半圆同圆心）
    ctx1.beginPath();
    ctx1.fillStyle = '#fff';
    ctx1.arc(100, 50, 5, 0, Math.PI * 2, true);
    ctx1.fill();
    // 下面的鱼眼睛（和下面小半圆同圆心）
    ctx1.beginPath();
    ctx1.fillStyle = '#000';
    ctx1.arc(100, 150, 5, 0, Math.PI * 2, true);
    ctx1.fill();

从这大概了解了canvas绘制就像画画一样，要先把背景画上，然后再一层一层的添加元素。