canvas-非零环绕原则

含义：射线由内向外延伸，经过的路径是否相反，相反相加为0 ，则需被挖空，其余则填充

image.png
图片来源（https://www.jianshu.com/p/f1590d4fb5c5）

绘制圆环：

我们可以画一个圆环。一个顺时针，一个逆时针，那么从里向外延伸射线之后，相交的路径方向相反，则中间需要被挖空

function torus() {

    ctx.shadowOffsetX = 8;
    ctx.shadowOffsetY = 8;
    ctx.shadowColor = 'black';
    ctx.shadowBlur = 10;
    ctx.beginPath();
    ctx.moveTo(250, 250);

    // 圆的路径一正一反
    ctx.arc(250, 250, 150, 0, 2 * Math.PI, false);
    ctx.arc(250, 250, 120, 0, 2 * Math.PI, true);

    ctx.fillStyle = 'orange';
    ctx.fill();
}
torus();

image.png