web-dev-qa-db-ja.com

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

キャンバス上のメッセージの各行の色を変更しようとしていますが、これまでのところ成功していません。私はそれらのそれぞれに変数を作成しようとしましたが、それでも運はありません。助けていただければ幸いです。

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


}
javascripthtml5html5-canvas
22
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);

また、「canvas」ではなく、コンテキスト変数に「context」または「cxt」という名前を付けることをお勧めします。それほど混乱しないでしょう:)

35
Gwennael Buchet

次のような単純なfillStylesを試しましたか？

  canvas.fillStyle = "#ff00ff";

<canvas>でのテキストレンダリングは、高度な塗りつぶしスタイルをサポートしない場合があります。

各メッセージをレンダリングする前に、新しいfillStyleを設定するだけです。

4
Mikko Ohtamaa