HTML5のfillText（）の色を変更する<canvas>

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


} 

Answer 1

テキストの色を設定する必要があります。

このような何か：

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」という名前を付けすることをお勧めかもしれません。

canvas.fillStyle = "#ff00ff"; 

<canvas>上のテキストレンダリングは、高度な塗りつぶしスタイルをサポートしていない可能性があります：それはあまり混乱するだろう:)

Answer 2

はあなたのような単純な塗りつぶしスタイルを試してみました。

各メッセージを表示する前に新しいfillStyleを設定するだけです。