Dessiner du texte sur le dessus du rectangle

Je suis en train de dessiner du texte dans le coin d'un rectangle, mais je viens de commencé le dessin du texte sur un rectangle avant d'aborder le positionnement. Je n'arrive pas à dessiner un rectangle, de le remplir avec une couleur puis de dessiner du texte sur elle. Même si je dessine d'abord le texte, puis rectangle, puis de remplir les commandes, le rectangle semble juste pour se faire chevaucher le texte.

Ce code va afficher du texte et des rectangles avec pas de remplissage

context.beginPath();

for (var i = 0; i < 8; i++) {
    context.font = "18pt Arial";
    context.fillText("blah", 0, 0 + (i * 50));
    context.rect(30, 0 + (i * 50), 50, 50);
}

context.lineWidth = 0.1;
context.strokeStyle = "black";
context.stroke();

Ce code va me montrer le texte et remplis dans les rectangles, mais le texte apparaît ci-dessous les rectangles.

context.beginPath();

for (var i = 0; i < 8; i++) {
   context.font = "18pt Arial";
   context.fillText("blah", 0, 0 + (i * 50));
   context.rect(30, 0 + (i * 50), 50, 50);
}

context.fillStyle = "#33cc00";
context.fill();
context.lineWidth = 0.1;
context.strokeStyle = "black";
context.stroke();

Les idées de ce que je fais mal?

OriginalL'auteur fes | 2011-04-06

  1. 9

    Chaque opération de peinture sur une Toile HTML5 tire sur le dessus et (en général) oblitère tout ce qui était en dessous. Si vous voulez que le texte de tirer sur le haut du rectangle, vous devez appeler fillText() après vous appelez fill() pour les rectangles que vous avez créé.

    Il n'a pas d'importance quel ordre les commandes de dessin sont ajoutés à la voie, c'est quand la fill() se produit qui détermine quand le instantanément le séchage de l'encre est appliquée. Depuis que vous faites cela, après tous vos fillText() appels, les rectangles sont dessinés sur le dessus.

    Je serait de modifier votre code comme ceci:

    context.font = "18pt Arial";
context.strokeStyle = "#000";
context.lineWidth = 0.1;
for (var i=0; i<8; i++) {
   context.fillStyle = "#3c0";
   context.fillRect(30, 0 + (i * 50), 50, 50);
   context.strokeRect(30, 0 + (i * 50), 50, 50);
   context.fillStyle = "#fff";
   context.fillText("blah", 0, 0 + (i * 50));
}

    Alternativement, si vous ne voulez pas utiliser fillRect()/strokeRect():

    context.font = "18pt Arial";
context.strokeStyle = "#000";
context.lineWidth = 0.1;
for (var i=0; i<8; i++) {
   context.beginPath();
   context.fillStyle = "#3c0";
   context.rect(30, 0 + (i * 50), 50, 50);
   context.fill();
   context.stroke();

   context.fillStyle = "#fff";
   context.fillText("blah", 0, 0 + (i * 50));
}
    parfait juste ce dont j'avais besoin. j'ai été un peu confondu avec la "dispersion" comme il n'était pas de remplir le bon de commande. merci

    OriginalL'auteur Phrogz