图标使用fillColor属性后为什么会不起作用

Question

代码如下：

结果显示图标为浅灰色

但图标原来的颜色是深灰

想知道哪里出错了？麻烦各位有时间的话帮我看看，谢谢！！

---

我发现图二不是浅灰色，是根据我设置的Blue显示的蓝色，但绝对有问题😭。若设置为Red就直接变成粉色了

Answer 1

🕒上午好，题主！目前：🟢[在线]
📢参考GPT-4o mini 模型、由清水白石008整理提供！
📣今日金句：“不怕慢，就怕站。” — 中国谚语

根据您提供的代码，您使用了 fillColor 属性来设置图标的填充颜色，但是图标的颜色并没有发生变化。这是因为您在设置 fillColor 属性时，没有将其应用到图标上。

在您的代码中，您创建了一个 Path 对象，并为其设置了 fillColor 属性，但是您没有将该 Path 对象渲染到画布上。因此，即使您设置了 fillColor 属性，但是也不会对图标产生任何影响。

为了解决这个问题，您需要将 Path 对象渲染到画布上，可以使用 graphics.drawPath() 方法来实现。修改后的代码如下：

const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const graphics = canvas.getContext('2d') as CanvasRenderingContext2D;

const path = new Path2D();
path.moveTo(10, 10);
path.lineTo(100, 10);
path.lineTo(100, 100);
path.lineTo(10, 100);
path.closePath();

graphics.fillStyle = 'red';
graphics.fill(path);

在上面的代码中，我们创建了一个 Path 对象，并为其设置了填充颜色为红色。然后，我们使用 graphics.fill(path) 方法将 Path 对象渲染到画布上，这样就可以看到图标的填充颜色已经变为红色了。

因此，如果您想使用 fillColor 属性来设置图标的填充颜色，请记得将 Path 对象渲染到画布上。