JS Canvas fillStyle异常求助：径向渐变圆形绘制颜色错误如何解决？

你遇到的问题核心是Canvas上下文的路径累积机制：每次调用arc()时，都是在已有路径上追加新的圆弧路径，而非创建独立的新路径。这导致后续的fill()操作会填充所有累积的路径区域，再加上渐变设置的作用范围混乱，最终出现渐变失效、图形重叠异常的效果。

修复方案 #

只需要在每次绘制圆弧前，调用beginPath()重置路径，确保每次绘制的都是独立的圆形路径。同时建议将fillStyle的设置放在路径绘制前，逻辑更清晰：

function draw_grd (x,y,r,c1,c2) {
    var gradient = ctx.createRadialGradient(x, y, 0, x, y, r);
    gradient.addColorStop(0,c1);
    gradient.addColorStop(1,c2);
    
    ctx.beginPath(); // 重置路径，避免累积
    ctx.fillStyle = gradient; // 先设置填充样式
    ctx.arc(x,y,r,0,2*Math.PI);
    ctx.fill();
}

draw_grd(50,50,50,"white","blue");
draw_grd(150,50,50,"green","red");
draw_grd(250,50,50,"black","pink");

关键说明 #

• beginPath()会清空当前的路径列表，让后续的绘图指令（比如arc()）创建全新的独立路径，这样每次fill()只会填充当前的圆形。
• 先设置fillStyle再绘制路径是更规范的Canvas绘图流程，避免样式和路径的关联混乱。

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