Come si cancella il testo dall'elemento <canvas>?

Question

Ho inserito del testo su un'immagine in un tag <canvas> (il testo è stato preso da una casella di input).

Ora se inserisco un nuovo testo nello <canvas>, viene imposto sul testo precedente. Come posso cancellare il testo esistente sulla tela prima di inserire il nuovo testo?

Ho provato a reimpostare la tela assegnando canvas.width ma il testo rimane acceso. Qualche aiuto?

Answer 1

Non sono sicuro di come cancellare il testo dall'immagine prima di inserire la parte successiva del testo.

Se lo sfondo della tela è costante; e modificando solo il testo è possibile sovrapporre due elementi di tela. Lo sfondo e un livello superiore trasparente per il testo che può essere rimosso e uno nuovo inserito quando si desidera aggiornare il testo.

Answer 2

Sarà necessario ridisegnare l'immagine prima di disegnare il nuovo testo.

Answer 3

non è sicuro se avrebbe funzionato, ma si potrebbe provare a ridisegnare il testo con il colore di sfondo

Answer 4

è necessario utilizzare clearRect (x, y, w, h); Maggiori dettagli su MDC

Answer 5

Mettere la tela in un altro contenitore div o

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

Chiaro che HTML del contenitore

canvasHold.innerHTML="" 

Poi sostituirla con una nuova tela.

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

Resubmit nuova tela di canapa con il nuovo testo

Answer 6

Se sai che stai andando ad essere aggiunta e la rimozione di testo molto, potrebbe avere senso per tenere traccia del vecchio testo. Allora si potrebbe utilizzare questo:

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

In questo modo non c'è bisogno di ridisegnare tutta la tela ogni volta.

Answer 7

Si utilizza context.clearRect(), ma prima si deve calcolare il rettangolo da cancellare. Ciò si basa su una serie di fattori, come la dimensione del testo e la proprietà textAlign del contesto canvas quando il testo è stato originariamente disegnato. Il codice sotto sarebbe per il metodo draw di un oggetto che disegna il testo in un contesto canvas, in quanto tale ha proprietà per x, y, dimensione del testo, allineamento orizzontale ecc. Nota che memorizziamo sempre l'ultimo pezzo di testo disegnato in modo da può cancellare un rettangolo di dimensioni appropriate quando il valore viene successivamente modificato.

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

Se non è possibile chiare altri disegni nella stessa area del testo, un'altra soluzione è quella di avere due tele, uno sopra l'altro:

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

quindi è possibile utilizzare il primo per la disegni statici che non devono essere rimossi e l'altro con disegni dinamici. Nel tuo caso puoi inserire il testo nella tela dinamica e rimuoverlo con clearRect prima di disegnare di nuovo.

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