如何使文本在 context.fillText 中不透明答案

【问题标题】：How can i make the text not transparent in the context.fillText如何使文本在 context.fillText 中不透明
【发布时间】：2023-04-03 05:54:01
【问题描述】：

context.font = '20pt Calibri';
context.fillStyle = 'rgba(225,225,225,0.5)';
var width = context.measureText(message2).width;
context.fillRect(xIndent, yIndent+100, width, 60);

context.fillStyle = 'rgba(255,85,0,1.0)';
context.fillText(message3, xIndent, yIndent+100);

我希望context.fillText 没有透明度，而context.fillRect 有一些透明度

出于某种原因，我可以使两者都透明或不透明

结果是文本和背景颜色具有相同的透明度

【问题讨论】：

这段代码的结果是什么？
两者透明度相同（0.5）
您是否在某处设置了 globalAlpha。尝试在代码前加上context.globalAlpha = 1。
我无法在 FF43 上重现您的问题。您能否创建一个小提琴，或显示您的问题的代码 sn-p。
我也无法在 Chrome 47 上重现您的问题

标签： javascript html css canvas

【解决方案1】：

您需要在写完第一个文本后重置所有内容。因为您可以在绘制或写入某些内容后设置 fillStyle，它仍然会填充它。所以，如果你想要一个接一个地画或写东西，你需要重置所有东西，这样下一个 fillStyle 也不会改变它的 fillStyle。写完第一个文本后，您需要使用context.beginPath()。这是您更正的代码：

context.font = '20pt Calibri';
context.fillStyle = 'rgba(225,225,225,0.5)';
var width = context.measureText(message2).width;
context.fillRect(xIndent, yIndent+100, width, 60);

context.beginPath();
context.fillStyle = 'rgba(255,85,0,1.0)';
context.fillText(message3, xIndent, yIndent+100);

每次你想画或写别的东西时最好使用context.beginPath()....希望对你有帮助.....

【讨论】：