[英]Changing color for fillText() on HTML5 <canvas>
我正在尝试更改画布上每一行消息的颜色,但到目前为止没有成功。 我已经尝试为每个变量创建变量,但仍然没有运气。 任何帮助,将不胜感激。
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);
}
你必须设置文本的颜色。
像这样的东西:
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);
此外,将上下文变量命名为“context”或“cxt”而不是“canvas”可能是个好主意。 它会不那么令人困惑:)
您是否尝试过简单的填充样式,例如:
canvas.fillStyle = "#ff00ff";
<canvas>
上的文本呈现可能不支持高级填充样式。
只需在渲染每条消息之前设置新的 fillStyle。
采用
canvas.fillStyle = "steelblue";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.