在HTML5 <canvas>中更改fillText()的颜色

Question

我试图改变画布上每一行消息的颜色，但迄今为止没有成功。我尝试为它们创建变量，但仍然没有运气。任何帮助都将不胜感激。

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);


}

- user2193106

Answer 1

你需要为文本设置颜色。

就像这样：

const canvasObj = document.getElementById('canvas')
const context = canvasObj.getContext('2d')

context.font = "bold 24px verdana, sans-serif ";
var welcomeMessage = "Welcome to the store!";
context.textAlign = "start";
context.textBaseline = "bottom";
context.fillStyle = "#ff0000"; //<======= here
context.fillText(welcomeMessage, 10, 50);

context.font = "bold 14px verdana, sans-serif";
var message2 = "Your favorite store for videos games and latest DVDs!";
context.textAlign = "start";
context.textBaseline = "bottom";
context.fillStyle = "#00ff00"; //<======= and here
context.fillText(message2, 10, 100);

<canvas id="canvas" width="400" height="100"></canvas>

此外，将您的上下文变量命名为"context" 或 "cxt"，而不是"canvas"，可能是个好主意。 这样会减少混淆 :)

- Gwennael Buchet

---

同意名称有些混淆。准确来说，MDN使用“ctx”表示Context2D。 - DoomGoober

Answer 2

你尝试过简单的fillStyles吗：

  canvas.fillStyle = "#ff00ff";

< p >在 <canvas> 上的文本呈现可能不支持高级填充样式。

只需在渲染每个消息之前设置新的 fillStyle。

- Mikko Ohtamaa

Answer 3

使用

canvas.fillStyle = "steelblue";

- neel