本文讲解如何在 html canvas 中通过按钮点击事件动态更改文本颜色，核心在于清空画布后重绘，避免颜色残留或叠加问题。
本文讲解如何在 html canvas 中通过按钮点击事件动态更改文本颜色，核心在于清空画布后重绘，避免颜色残留或叠加问题。
在 Canvas 中，fillStyle 仅设置后续绘制操作的颜色，并不会自动更新已渲染的内容。因此，直接修改 context.fillStyle 后不重绘，画布上的文字颜色不会发生变化——这是初学者常见的误区。正确做法是：每次颜色变更后，先清空画布，再以新颜色重新绘制全部内容。
✅ 正确实现步骤
- 封装绘制逻辑：将字体、颜色、位置等配置抽象为可复用的 draw(color) 函数；
- 清空画布：使用 clearRect(0, 0, canvas.width, canvas.height) 彻底清除当前帧；
- 触发重绘：点击按钮时调用 clearCanvas() + draw(newColor) 组合。
以下是完整、可直接运行的示例代码：
<!doctype html>
<html>
<head>
<style>
#my-canvas { border: 1px solid #ccc; }
</style>
</head>
<body>
<canvas id="my-canvas" width="300" height="100"></canvas>
<br>
<button onclick="ChangeColor()">Change Font Color to Blue</button>
<button onclick="ResetColor()">Reset to Red</button>
<script>
const canvas = document.querySelector('#my-canvas');
const context = canvas.getContext('2d');
// 初始绘制（红色）
draw('red');
function draw(color) {
context.font = '48px serif';
context.textAlign = 'left';
context.textBaseline = 'middle';
context.fillStyle = color;
context.fillText('Example text', 20, 50); // y=50 更符合视觉居中
}
function clearCanvas() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
function ChangeColor() {
clearCanvas();
draw('blue');
}
function ResetColor() {
clearCanvas();
draw('red');
}
</script>
</body>
</html>⚠️ 注意事项
- 不要遗漏 clearRect()：Canvas 是位图绘制，无 DOM 更新机制，旧内容必须手动清除；
- 重绘范围要准确：clearRect(0, 0, canvas.width, canvas.height) 使用 canvas 元素自身的 width/height 属性（非 CSS 尺寸），确保完全清空；
- 文本对齐优化：添加 textAlign 和 textBaseline 可提升文本定位精度（如示例中 y=50 配合 middle 实现垂直居中）；
- 避免内联事件绑定（进阶建议）：生产环境推荐使用 addEventListener 替代 onclick，便于解耦与测试。
掌握“清空→设置→重绘”这一 Canvas 渲染范式，是实现动画、交互及状态驱动可视化的基础。后续可轻松扩展为多颜色切换、字体变化、甚至结合输入框动态修改文本内容。
