Canvas/JS文本叠加背景问题：fillStyle同时作用于文本与背景

这个问题其实是Canvas上下文的状态机特性导致的——Canvas的绘图样式（比如fillStyle）是全局生效的，一旦你设置了某个fillStyle，后续所有的填充操作（不管是填充矩形还是填充文本）都会使用这个颜色，除非你重新覆盖它。

问题根源 #

你应该是先设置了背景的fillStyle，然后直接调用fillText()绘制文本，没有重新设置文本对应的fillStyle为黑色，所以文本会和背景用同一种颜色，导致看不见或者不符合预期。

解决方案 #

你只需要在绘制文本前，重新把fillStyle设置为黑色即可，或者用save()/restore()来管理绘图状态，避免全局样式污染。

方案1：手动重新设置fillStyle

这是最直接的方式，在绘制不同样式的元素前，明确设置对应的样式：

const canvas = document.getElementById('your-canvas-id');
const ctx = canvas.getContext('2d');

// 第一步：绘制背景
ctx.fillStyle = '#你的背景颜色'; // 比如浅蓝色 '#add8e6'
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 第二步：绘制文本，先设置黑色填充
ctx.fillStyle = '#000'; // 黑色
ctx.font = '16px sans-serif'; // 按需设置字体
ctx.fillText('你的文本内容', 50, 50); // 调整坐标

方案2：用save()和restore()管理状态

如果你担心后续样式会互相影响，可以用save()保存当前的绘图状态，绘制完背景后用restore()恢复到初始状态（初始的fillStyle就是黑色）：

const canvas = document.getElementById('your-canvas-id');
const ctx = canvas.getContext('2d');

// 保存初始状态（此时fillStyle是默认的黑色）
ctx.save();

// 绘制背景
ctx.fillStyle = '#你的背景颜色';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 恢复到之前保存的初始状态
ctx.restore();

// 现在绘制文本，fillStyle已经回到黑色了
ctx.font = '16px sans-serif';
ctx.fillText('你的文本内容', 50, 50);

关键提醒 #

Canvas的上下文状态包括fillStyle、strokeStyle、font、lineWidth等所有绘图相关的属性，每次绘制不同样式的元素时，一定要注意当前的状态是否符合需求，要么手动覆盖，要么用save()/restore()来隔离状态。

内容的提问来源于stack exchange，提问作者jcooke.mn