更改HTML5上的fillText（）的颜色<canvas>

我试图在画布上为我的消息的每一行更改颜色，但目前为止尚未成功。我曾尝试为它们中的每一个创建变量，但仍然没有运气。任何帮助，将不胜感激。更改HTML5上的fillText（）的颜色<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); 


}

来源

2013-04-01 user2193106

您必须设置文本的颜色。

事情是这样的：

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

而且，它可能是一个好主意来命名上下文变量“上下文”或“CXT”，而不是“画布”。这将是减少混乱:)

来源

2013-04-01 19:27:06

谢谢！有效！ :) – user2193106

不客气:)。如果这是一个很好的答案，你可以投票赞成并将其标记为正确的答案吗？谢谢。 –

@Gwennael我做了upvote ... !!! –

您是否尝试过简单fillStyles这样的：

canvas.fillStyle = "#ff00ff";

上<canvas>的文本渲染可能不支持先进的填充样式。

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

来源

2013-04-01 19:27:21

谢谢，它的工作！ :) – user2193106

更改HTML5上的fillText（）的颜色<canvas>

回答

相关问题