Canvas 文本颜色动态切换操作步骤：点击按钮实时更新文字颜色

在 Canvas 中修改文字颜色不能仅更改 fillStyle，必须清空画布并重新绘制；本文详解如何通过按钮点击实现文本颜色的即时切换，并提供可复用的封装函数。

在 Canvas 中修改文字颜色不能仅更改 `fillStyle`，必须清空画布并重新绘制；本文详解如何通过按钮点击实现文本颜色的即时切换，并提供可复用的封装函数。

Canvas 是一个位图绘图环境，其内容不会自动响应样式变更——设置 context.fillStyle = 'blue' 仅影响后续绘制操作，不会重绘已存在的文字。因此，要实现“点击按钮改变文字颜色”，核心步骤是：清空画布 → 更新样式 → 重新绘制全部内容。

以下为推荐实现方式，采用模块化函数设计，提升可维护性与复用性：

const canvas = document.querySelector('#my-canvas');const ctx = canvas.getContext('2d');// 初始化绘制（红色文字）draw('red');function ChangeColor() {clearCanvas();draw('blue');}function clearCanvas() {ctx.clearRect(0, 0, canvas.width, canvas.height);}function draw(color) {ctx.font = '48px serif';ctx.fillStyle = color;ctx.fillText('Example text', 20, 65);}

对应 HTML 结构保持简洁：

<canvas id="my-canvas" width="300" height="100"></canvas><br><button onclick="ChangeColor()">Change Font Color Blue</button>

关键要点说明：

1. clearRect() 是清空 Canvas 的标准方法，参数为 (x, y, width, height)，覆盖整个画布区域；
2. 将绘制逻辑封装进 draw(color) 函数，便于扩展（如支持多段文字、不同字体或位置）；
3. 避免在事件处理中直接操作 fillStyle 后调用 fillText() 而不清空——这会导致新旧文字重叠（尤其当颜色对比弱时易被忽略）；
4. 若需支持多次切换（如红→蓝→绿→红），可将颜色状态存入变量，并在 ChangeColor() 中轮询或传参控制。

该模式是 Canvas 动态渲染的基础范式，适用于所有需要响应式视觉更新的场景——不仅是文字颜色，还包括图形移动、动画帧刷新等。