Canvas之图形裁剪

Canvas之图形裁剪

ctx.beginPath();
ctx.strokeRect(100,100,200,200);

const img = new Image();
img.src = 'exercises/imgs/04.png';
img.onload = function () { 
    ctx.beginPath();
    //先确定裁剪路径
    ctx.arc(200, 200, 100, 0, Math.PI * 2)
    ctx.clip();
    //在进行绘制图形
    ctx.drawImage(img, 200 - img.width / 2, 200 - img.height / 2);
};

我们想要裁剪一个图形。需要先设置好裁剪路径，然后设置 ctx.clip() ，之后绘制的图形将都会被裁剪。之前绘制的图形不受影响。为了更好的设置裁剪路径，所以将 ctx.clip() 之前的部分作为裁剪路径。

ctx.beginPath();
ctx.strokeRect(100,100,200,200);

ctx.arc(200,200,100,0,Math.PI*2,false);//顺时针
// ctx.arc(200,200,80,0,Math.PI*2,true);//逆时针
ctx.clip('evenodd');
ctx.fillRect(100,100,200,200);

裁剪路径有一个参数，设定了裁剪规则，可以是非零环绕裁剪，也可以是奇偶环绕裁剪。
当设置 'nonzero' 时，为默认设置。只会留下不为零的区域。为零的区域会被裁剪掉。根据顺时针环绕+1，逆时针环绕-1的规则进行裁剪。
当设置 ‘evenodd’ 时，不考虑环绕方向，只考虑环绕次数。绘制一次就会+1，当为奇数次时留下区域，为偶数次时裁剪掉区域。
这些规则是为了解决同一片区域被多个裁剪路径重复裁剪。