Html 在 HTML5 <canvas> 上更改 fillText() 的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15750013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing color for fillText() on HTML5 <canvas>
提问by user2193106
I am trying to change the color for each line of my messages on canvas, but no success so far. I have tried creating variable for each one of them, but still no luck. any help would be appreciated.
我正在尝试更改画布上每一行消息的颜色，但到目前为止没有成功。我已经尝试为每个变量创建变量，但仍然没有运气。任何帮助，将不胜感激。
function initiate(){
var elem = document.getElementById("canvas");
canvas = elem.getContext("2d");
addEventListener("mousemove", animation);
canvas.shadowColor = "rgba(0, 0, 0, 0.5)";
canvas.shadowOffsetX = 4;
canvas.shadowOffsetY = 4;
canvas.shadowBlur = 5;
canvas.font = "bold 24px verdana, sans-serif ";
var welcomeMessage ="Welcome to the store!";
canvas.textAlign = "start";
canvas.textBaseline = "bottom";
canvas.fillText(welcomeMessage, 400, 50);
canvas.font = "bold 14px verdana, sans-serif";
var message2 = "Your favorite store for videos games and latest DVDs!";
canvas.textAlign = "start";
canvas.textBaseline = "bottom";
canvas.fillText(message2, 400, 100);
canvas.font = "bold 12px verdana, sans-serif";
canvas.textAlign = "start";
canvas.textBaseline = "bottom";
// Create gradient
//var gradient=canvas.createLinearGradient(0,0,c.width,0);
//gradient.addColorStop("0","magenta");
//gradient.addColorStop("0.5","blue");
//gradient.addColorStop("1.0","red");
//canvas.fillStyle = gradient;
canvas.fillText(" <-- Move your mouse aroud to interact with Macroplay smily!", 400, 250);
}
回答by Gwennael Buchet
you have to set the color for the text.
你必须设置文本的颜色。
Something like this:
像这样的东西：
canvas.font = "bold 24px verdana, sans-serif ";
var welcomeMessage ="Welcome to the store!";
canvas.textAlign = "start";
canvas.textBaseline = "bottom";
canvas.fillStyle = "#ff0000"; //<======= here
canvas.fillText(welcomeMessage, 400, 50);
canvas.font = "bold 14px verdana, sans-serif";
var message2 = "Your favorite store for videos games and latest DVDs!";
canvas.textAlign = "start";
canvas.textBaseline = "bottom";
canvas.fillStyle = "#00ff00"; //<======= and here
canvas.fillText(message2, 400, 100);
Also, it could be a good idea to name your context variable "context" or "cxt" instead of "canvas". It would be less confusing :)
此外，将上下文变量命名为“context”或“cxt”而不是“canvas”可能是个好主意。它会不那么令人困惑:)
回答by Mikko Ohtamaa
Have you tried simple fillStyles like:
您是否尝试过简单的填充样式，例如：
canvas.fillStyle = "#ff00ff";
The text rendering on <canvas>might not support advanced fill styles.
文本渲染<canvas>可能不支持高级填充样式。
Just set new fillStyle before rendering each message.
只需在渲染每条消息之前设置新的 fillStyle。
