非零环绕

Posted corn林

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了非零环绕相关的知识,希望对你有一定的参考价值。

<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();
}

 

以上是关于非零环绕的主要内容,如果未能解决你的问题,请参考以下文章

填充路径时使用的非零环绕规则

canvas填充规则,非零环绕

非零缠绕规则和奇偶规则

OpenGL片段着色器不照亮场景

负退出代码的含义

canvas基础用法