如何在HTML Canvas中仅让两个图形合成不影响其他已绘制图形

你使用的globalCompositeOperation = "destination-out"是全局生效的合成规则，作用对象是当前画布上所有已绘制的内容，因此挖洞操作会同时擦除底层的蓝色背景。

最优解决方式是直接使用Canvas路径的奇偶填充规则实现镂空，不需要修改全局合成模式，完全不会影响之前已经绘制的其他元素。修正后的代码如下：

// 原有蓝色背景绘制逻辑不变
context.fillStyle = 'blue';
context.fillRect(0, 0, width, height);

// 直接绘制带镂空的黑色矩形
context.fillStyle = "#000000";
context.beginPath();
// 添加外层矩形路径
context.rect(0, 0 , width, height);
// 添加内层圆形路径，完整圆形的结束角度应为2*Math.PI，修正原代码的参数错误
context.arc(width / 2, height / 2 , 80, 0, 2 * Math.PI);
// 用奇偶规则填充，内外路径重叠区域自动镂空，仅作用于本次填充的黑色矩形
context.fill('evenodd');

实现原理：Canvas默认的填充规则为非零环绕规则，指定evenodd规则后，会统计区域被路径包围的次数，次数为奇数时填充，偶数时不填充。中间圆形区域被外层矩形和内层圆形两条路径包围，计数为2（偶数），因此不会被填充，自然形成镂空效果，全程没有修改全局合成规则，不会影响其他已绘制元素。

内容的提问来源于stack exchange，提问作者Hjude_design