1. 剪辑区域
void ctx.clip([fillRule]);
void ctx.clip(path, [fillRule]);
1
2
2
1.1 方法一
先指定剪辑区域
// 指定剪辑区域
this.ctx.beginPath();
this.ctx.arc(100, 75, 50, 0, Math.PI * 2, false);
this.ctx.clip();
// 填充剪辑区域
this.ctx.fillStyle = "#ffffff";
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
TIP
剪辑区域会保留在上下文变量中，使用时建议使用context.save()及context.restore()包裹起来，防止污染全局上下文。
1.2 方法二
clip
// 指定剪辑区域
const region = new Path2D();
region.rect(100, 85, 300, 30);
region.rect(235, 50, 30, 100);
this.ctx.clip(region, this.fillRule); // nonzero || evenodd
// 填充剪辑区域
this.ctx.fillStyle = "blue";
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
TIP
new Path2D兼容性参考