Canvas---繪制一個鏤空正方形

繪制一個鏤空正方形

 

第一個正方形順時針軌跡

第二個正方形逆時針軌跡

軌跡值為0，不填充，就是鏤空效果了

 /*1.繪制兩個正方形 一大200一小100 套在一起*/
        ctx.moveTo(100, 100);
        ctx.lineTo(300, 100);
        ctx.lineTo(300, 300);
        ctx.lineTo(100, 300);
        ctx.closePath();

        ctx.moveTo(150, 150);
        ctx.lineTo(150, 250);
        ctx.lineTo(250, 250);
        ctx.lineTo(250, 150);
        ctx.closePath();

        /*2.去填充*/
        //ctx.stroke();
        ctx.fillStyle = 'red';
        ctx.fill();

        /*在填充的時候回遵循非零環繞規則*/

 

在填充的時候回遵循非零環繞規則

1. 第一個正方形，軌跡值非0，填充

2. 第二個正方形，軌跡值是0，不填充