Comment effacer du texte de l'élément <canvas>?

Question

J'ai mis du texte sur une image dans une étiquette <canvas> (le texte provient d'une boîte de saisie).

Maintenant, si je mets un nouveau texte sur le <canvas>, il est imposé sur le texte précédent. Comment effacer le texte existant sur la toile avant de mettre le nouveau texte?

J'ai essayé de réinitialiser le canevas en affectant canvas.width mais le texte reste allumé. Des gens d'aide?

Answer 1

Je ne suis pas sûr de savoir comment effacer le texte de l'image avant de mettre le texte suivant.

Si l'arrière-plan de la toile est constant; et votre seul changement de texte, vous pouvez superposer deux éléments de toile. L'arrière-plan, et une couche supérieure transparente pour le texte qui peut être supprimé et un nouveau inséré lorsque vous souhaitez mettre à jour le texte.

Answer 2

Vous devrez redessiner l'image avant de dessiner le nouveau texte.

Answer 3

ne sais pas si cela fonctionnerait, mais vous pouvez essayer de redessiner le texte dans la couleur de fond

Answer 4

Vous devez utiliser clearRect (x, y, w, h); Plus de détails sur MDC

Answer 5

Mettez la toile dans un autre div ou conteneur

<div id=canvasHold><canvas id=myCanvas></canvas></div> 

clair que le HTML contenant

canvasHold.innerHTML="" 

ensuite le remplacer par une nouvelle toile.

canvasHold.innerHTML="<canvas id=myCanvas></canvas>" 

nouvelle toile avec Resoumettre nouveau texte

Answer 6

Si vous savez que vous allez être ajout et la suppression du texte beaucoup, il peut être judicieux de garder une trace de l'ancien texte. Ensuite, vous pouvez simplement utiliser ceci:

context.fillStyle = '#ffffff'; // or whatever color the background is. 
context.fillText(oldText, xCoordinate, yCoordinate); 
context.fillStyle = '#000000'; // or whatever color the text should be. 
context.fillText(newText, xCoordinate, yCoordinate); 

De cette façon, vous n'avez pas besoin de redessiner la totalité de la toile à chaque fois.

Answer 7

Vous utilisez context.clearRect(), mais vous devez d'abord déterminer le rectangle à effacer. Ceci est basé sur un certain nombre de facteurs, tels que la taille du texte et la propriété textAlign du contexte de canevas lorsque le texte a été dessiné à l'origine. Le code ci-dessous serait pour la méthode de dessin d'un objet qui dessine du texte dans un contexte de canevas, comme il a des propriétés pour x, y, taille de texte, alignement horizontal etc. Notez que nous stockons toujours le dernier texte dessiné peut effacer un rectangle de taille appropriée lorsque la valeur est modifiée.

this.draw = function() { 
    var metrics = this.ctx.measureText(this.lastValue), 
     rect = { 
     x: 0, 
     y: this.y - this.textSize/2, 
     width: metrics.width, 
     height: this.textSize, 
     }; 

    switch(this.hAlign) { 
    case 'center': 
     rect.x = this.x - metrics.width/2; 
     break; 
    case 'left': 
     rect.x = this.x; 
     break; 
    case 'right': 
     rect.x = this.x - metrics.width; 
     break; 
    } 

    this.ctx.clearRect(rect.x, rect.y, rect.width, rect.height); 

    this.ctx.font = this.weight + ' ' + this.textSize + ' ' + this.font; 
    this.ctx.textAlign = this.hAlign; 
    this.ctx.fillText(this.value, this.x, this.y); 
    this.lastValue = this.value; 
} 

Answer 8

Si vous ne pouvez pas effacer d'autres dessins dans la même zone du texte, une autre solution est d'avoir deux toiles, l'une sur l'autre:

<div style="position: relative;"> 
    <canvas id="static" width="1350" height="540" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> 
    <canvas id="dynamic" width="1350" height="540" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 
</div>  

Ensuite, vous pouvez utiliser la première pour dessins statiques qui n'ont pas besoin d'être supprimés, et l'autre avec des dessins dynamiques. Dans votre cas, vous pouvez mettre le texte dans le canevas dynamique et le supprimer avec clearRect avant de dessiner à nouveau.

context.clearRect(0, 0, canvas.width, canvas.height);