HTML5 Canvas绘制多组径向渐变出现裁剪的原因是什么？

问题场景 #

你使用HTML5 Canvas绘制一系列径向渐变的代码如下：

const gradient = ctx.createRadialGradient(x, y, radius / 10, x, y, radius);

gradient.addColorStop(0, colour);
gradient.addColorStop(1, "transparent");

ctx.arc(x, y, radius, 0, 2 * Math.PI);

ctx.fillStyle = gradient;
ctx.fill();

随着绘制的渐变数量增多，画布上出现了裁剪现象（截图显示部分渐变图形被异常截断）。画布仅渲染此内容，未执行其他Canvas上下文操作，疑问是性能问题还是其他原因？

注：此问题与其他Canvas多圆绘制问题不同，聚焦于未开启新路径时的裁剪现象。

问题原因 #

这不是性能问题，核心原因是Canvas路径未重置。Canvas的路径是累积式的——每次调用ctx.arc()都会把新的圆弧追加到当前已有的路径中。当循环绘制多个渐变圆时，所有圆弧会被合并成一个复杂的复合路径，fill()操作会按照默认的非零环绕规则填充这个复合路径的合并区域，导致部分区域被抵消，视觉上呈现“裁剪”效果。

解决办法 #

每次绘制新的渐变圆前，调用ctx.beginPath()重置路径，确保每个圆都是独立的绘制路径：

// 循环绘制每个渐变圆时添加此句
ctx.beginPath();

const gradient = ctx.createRadialGradient(x, y, radius / 10, x, y, radius);
gradient.addColorStop(0, colour);
gradient.addColorStop(1, "transparent");

ctx.arc(x, y, radius, 0, 2 * Math.PI);

ctx.fillStyle = gradient;
ctx.fill();

beginPath()会清空当前的路径列表，让后续的arc()命令创建全新的独立路径，这样每个圆的径向渐变都会被正确填充，不会出现路径合并导致的异常裁剪。

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