使用FillStyle()与RoundRect()绘制不同颜色圆角矩形异常求助

你遇到的问题是Canvas 2D上下文的路径机制导致的：roundRect会把矩形路径添加到当前上下文的同一个路径集合里，而非每次创建独立路径。

第一次调用roundRect后，路径里包含第一个矩形，执行fill()会用#00a6a4填充它，但这个路径不会自动清除；第二次调用roundRect时，第二个矩形被追加到同一个路径中，此时执行fill()会把路径里的两个矩形全部用新的#2e2e2e颜色填充，最终两个矩形都变成了最后设置的颜色。

修复后的代码 #

只需在每次绘制新图形前用beginPath()开启全新路径，让每个矩形的路径独立，填充时只会影响当前路径的图形：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth
canvas.height = window.innerHeight

// 绘制蓝绿色圆角矩形
ctx.beginPath(); // 开启新路径
ctx.fillStyle = "#00a6a4";
ctx.roundRect(10, 10, 100, 100, 10);
ctx.fill();

// 绘制深灰色圆角矩形
ctx.beginPath(); // 开启新路径
ctx.fillStyle = "#2e2e2e";
ctx.roundRect(110, 110, 100, 100, 10);
ctx.fill();

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