ctx.fillStyle 是 Canvas 2D 上下文的核心属性，作用是 设置后续「填充类绘制操作」的颜色 / 渐变 / 图案—— 简单说，就是定义 “用什么东西填充图形、文字、路径” 的样式。
结合我们的海报代码场景，它的用法和细节如下：
一、核心作用：定义 “填充内容” 的样式
Canvas 中的绘制分为两类：
填充（fill）：给图形、文字、路径的 “内部区域” 上色（比如实心矩形、文字本身的颜色）；
描边（stroke）：给图形、路径的 “边框” 上色（比如我们之前标签的红色边框，用的是 ctx.strokeStyle）。
ctx.fillStyle 专门控制「填充」的样式，后续所有调用 ctx.fill()（填充路径）、ctx.fillRect()（填充矩形）、ctx.fillText()（填充文字）的操作，都会使用当前设置的 fillStyle。
二、常见用法（结合海报代码）
- 纯色填充（最常用）
直接设置为颜色值（支持十六进制、RGB、RGBA、颜色名），是我们海报中用得最多的方式：
javascript
运行
// 1. 十六进制颜色（推荐，精准）
ctx.fillStyle = '#D2691E'; // 主标题栏的橙色
ctx.fillRect(0, 120 * scale, 375 * scale, 60 * scale); // 填充矩形
// 2. RGB/RGBA（支持透明度）
ctx.fillStyle = 'rgba(255, 0, 0, 0.8)'; // 80%透明度的红色（价格区域可用）
ctx.fillText('¥39.90', 20 * scale, 520 * scale); // 填充文字
// 3. 颜色名（不推荐，兼容性略差）
ctx.fillStyle = 'white'; // 白色，比如标签内的文字
- 渐变填充（进阶用法）
可以创建线性渐变或径向渐变，让填充效果更丰富（比如海报标题栏渐变）：
javascript
运行
// 线性渐变：从橙色到深橙色（主标题栏优化）
const gradient = ctx.createLinearGradient(
0, 120 * scale, // 渐变起始点（左上角）
375 * scale, 120 * scale // 渐变结束点（右上角）
);
gradient.addColorStop(0, '#D2691E'); // 起始颜色
gradient.addColorStop(1, '#A0522D'); // 结束颜色
ctx.fillStyle = gradient;
ctx.fillRect(0, 120 * scale, 375 * scale, 60 * scale); // 填充渐变矩形 - 图片图案填充（高级用法）
用图片作为填充图案（比如给背景添加纹理）：
javascript
运行
const patternImg = canvas.createImage();
patternImg.src = 'https://example.com/texture.png'; // 纹理图片
patternImg.onload = () => {
const pattern = ctx.createPattern(patternImg, 'repeat'); // repeat：重复填充
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 375 * scale, 667 * scale); // 用纹理填充整个背景
};
三、关键细节（避坑重点） - 「状态化」属性：设置后持续生效
ctx.fillStyle 是 “全局状态”，一旦设置，后续所有填充操作都会沿用，直到再次修改：
javascript
运行
ctx.fillStyle = 'red';
ctx.fillText('文字1', 20, 50); // 红色文字
ctx.fillRect(20, 80, 100, 50); // 红色矩形（沿用 red）
ctx.fillStyle = 'blue'; // 重新设置
ctx.fillText('文字2', 20, 150); // 蓝色文字（新样式）
- 与 ctx.save()/ctx.restore() 配合
如果只想让某个元素用特定 fillStyle，之后恢复原来的样式，可以用状态保存 / 恢复：
javascript
运行
ctx.fillStyle = 'black'; // 默认文字颜色
ctx.save(); // 保存当前状态（包括 fillStyle: black）
// 临时设置为红色，绘制单个元素
ctx.fillStyle = 'red';
ctx.fillText('特殊红色文字', 20, 100);
ctx.restore(); // 恢复之前的状态（fillStyle 变回 black）
ctx.fillText('普通黑色文字', 20, 130); // 回到默认颜色
- 透明度优先级
如果用 rgba 或 globalAlpha（全局透明度），优先级是：globalAlpha 会作用于所有样式（包括 fillStyle）：
javascript
运行
ctx.globalAlpha = 0.5; // 全局透明度 50%
ctx.fillStyle = 'red'; // 红色 + 50% 透明 → 最终是半透明红色
ctx.fillRect(20, 20, 100, 50);
四、我们的海报代码中，ctx.fillStyle 的典型应用
海报元素 fillStyle 用法 目的
背景 #FFF（白色） 白色底色，干净清晰
小程序名称 #2E8B57（深绿色） 品牌色识别
主标题栏 #D2691E（橙色） 突出重点，吸引注意力
价格 #FF0000（红色） 强调价格，刺激购买
商品名称 #000（黑色） 文字清晰可读
横线 #D2691E（橙色） 与主标题栏呼应，风格统一
总结
ctx.fillStyle 是 Canvas 填充样式的 “总开关”，核心用法是：
用纯色（十六进制 / RGB）定义大多数元素的填充颜色（满足海报 90% 需求）；
进阶用渐变 / 图片让特定元素更有设计感；
注意 “设置后持续生效” 的特性，必要时用 save()/restore() 隔离样式。
如果想调整海报中某个元素的颜色，直接修改对应位置的 ctx.fillStyle 即可～
