canvas镂空图形

Question

我期望一个canvas能实现上图效果
红色为canvas的底色(非css) 涂满整个容器
灰色为canvas某个区域
中间白色想实现镂空效果 漏出底层的红色
白色图形可能有多个且可能相交

Answer 1

问题解决还是用的非零环绕原则 和@冯恒智 的思路是差不多的
但是我的场景会有多个镂空图形且可能相交 这个坐标点的计算就很复杂了
使用了clipper来做布尔算法计算坐标点位
完美解决

Answer 2

https://jsfiddle.net/0vf97b6c/

    const canvas = document.getElementById('canvas');
    const cxt = canvas.getContext('2d');
    cxt.beginPath();
    cxt.fillStyle = "rgb(0,255,0)";
    cxt.moveTo(100, 100);
    cxt.lineTo(400, 700);
    cxt.lineTo(700, 100);
    cxt.moveTo(300, 300);
    cxt.lineTo(400, 200);
    cxt.lineTo(500, 300);
    cxt.fill();
    cxt.closePath(); 

跟顺时针逆时针有关