[英]Changing color for fillText() on HTML5 <canvas>
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);
}
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".此外,将上下文变量命名为“context”或“cxt”而不是“canvas”可能是个好主意。 It would be less confusing :)它会不那么令人困惑:)
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。
采用
canvas.fillStyle = "steelblue";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.