非零环绕

<canvas id="canvas" width="800" height="500" style="border:1px solid #666;display:block;margin:0 auto">
    当前浏览器不支持canvas，请更换浏览器后再试。
</canvas>

window.onload = function(){
    var canvas = document.getElementById(‘canvas‘);
    var context = canvas.getContext(‘2d‘);

    context.beginPath();
    context.arc(400, 250, 50, 0, 2*Math.PI, true);//圆A
    context.arc(400, 250, 100, 0, 2*Math.PI, false);//圆B
    //设true方向为1，fasle方向为-1，假设在圆A内部有一条射线与圆A、B边相交，两者方向相加为0，则圆A内部为绘制内容的外侧，反之则相反。
    context.closePath();
    context.fillStyle = "#058";
    context.shadowColor = ‘gray‘;
    context.shadowOffsetX = 5;
    context.shadowOffsetY = 5;
    context.shadowblur = 10;
    context.fill();
}