Canvas 填充,非零环绕原则,中空矩形

时间：2023-02-09 21:08:56


demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="cvs"></canvas>
    <script>

        /*
        * 非零环绕原则(填充的时候)：
        * 是用来判断哪些区域属于路径内( 计算结果非0，即为路径内 )。
        * 在路径包围的区域中，随便找一点，向外发射一条射线，
        * 和所有围绕它的边相交，
        * 然后开启一个计数器，从0计数，
        * 如果这个射线遇到顺时针围绕，那么+1，
        * 如果遇到逆时针围绕，那么-1，
        * 如果最终值非0，则这块区域在路径内。
        *
        * 备注：奇数边的区域一定在路径内。
        * */

        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        // 封装一个绘制矩形的函数
        function juXing( startX, startY, width, height, lineWidth, strokeStyle ) {

            ctx.moveTo( startX, startY );
            ctx.lineTo( startX + width, startY );
            ctx.lineTo( startX + width, startY + height );
            ctx.lineTo( startX, startY + height );
            ctx.closePath();

            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = strokeStyle;

            ctx.stroke();
        }

        // 顺时针画一个大矩形
        juXing( 10, 10, 100, 100, 6, 'skyblue' );

        // 逆时针画一个小矩形
        ctx.moveTo( 35, 35 );
        ctx.lineTo( 35, 55 );
        ctx.lineTo( 55, 55 );
        ctx.lineTo( 55, 35 );
        ctx.closePath();

        // 一起填充
        ctx.fill();  //中空的矩形
    </script>
</body>
</html>


标签：

相关文章