web-dev-qa-db-fra.com

Modification de la couleur de fillText () sur HTML5 <canvas>

J'essaie de changer la couleur de chaque ligne de mes messages sur toile, mais sans succès jusqu'à présent. J'ai essayé de créer des variables pour chacun d'eux, mais toujours pas de chance. Toute aide serait appréciée.

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

vous devez définir la couleur du texte.

Quelque chose comme ça:

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

En outre, il pourrait être judicieux de nommer votre variable de contexte "context" ou "cxt" au lieu de "canvas". Ce serait moins déroutant :)

35
Gwennael Buchet

Avez-vous essayé des fillStyles simples comme:

  canvas.fillStyle = "#ff00ff";

Le rendu du texte sur <canvas> peut ne pas prendre en charge les styles de remplissage avancés.

Définissez simplement un nouveau fillStyle avant de rendre chaque message.

4
Mikko Ohtamaa