J'ai mis du texte sur une image dans une balise
9 Réponses :
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 que vous pouvez calmer deux éléments en toile. L'arrière-plan et une couche supérieure transparente pour le texte pouvant être supprimée et une nouvelle insérée lorsque vous souhaitez mettre à jour le texte.
Vous devrez redessiner l'image avant de dessiner le nouveau texte.
Je ne sais pas si cela fonctionnerait, mais vous pouvez essayer de redessiner le texte en arrière-plan
Mettez la toile dans un autre div ou conteneur effacer que le conteneur HTML P> puis le remplace par une nouvelle toile. P> canvasHold.innerHTML="<canvas id=myCanvas></canvas>"
boiteux! Oui résout le problème, mais la réglage de la couleur du texte sur RGBA (0,0,0,0);
Si vous savez que vous allez ajouter et supprimer beaucoup de texte, cela pourrait être logique 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);
Une réponse aussi utile pour moi! Cependant, lorsque vous n'utilisez pas de noir comme couleur de fond, vous devrez peut-être remplir aut-à-propos de l'ancien texte 2 o 3 fois. Néanmoins, c'est toujours une bonne solution.
bonne réponse, il suffit de remplir le texte de la même couleur que de fond
laisse une frontière d'ombre autour du texte
Vous utilisez context.Clarrect (), mais vous devez d'abord trouver le rectangle pour effacer. Ceci est basé sur un certain nombre de facteurs, tels que la taille du texte et la propriété textalign du contexte de toile lorsque le texte a été initialement tiré. Le code ci-dessous serait destiné à la méthode de tirage d'un objet qui dessine du texte dans un contexte de toile, en tant que telle disposant de propriétés de X, Y, de taille de texte, d'alignement horizontal, etc. Notez que nous stockons toujours le dernier morceau de texte dessiné afin que nous peut effacer un rectangle de taille appropriée lorsque la valeur est ensuite 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;
}
Si vous ne pouvez pas effacer d'autres dessins dans la même zone du texte, une autre solution consiste à avoir deux toiles, l'une sur l'autre: alors vous pouvez utiliser le premier pour Des dessins statiques qui n'ont pas besoin d'être enlevés et de l'autre avec des dessins dynamiques. Dans votre cas, vous pouvez mettre le texte dans la toile dynamique et le supprimer avec ClearRect avant de vous dessiner. P> context.clearRect(0, 0, canvas.width, canvas.height);
Voici la meilleure approche et cela a fonctionné pour moi. La fonction claire est juste pour effacer le recaptcha. Donc, appelez cette fonction lorsque vous vous rafraîchez.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<h4>Canvas</h4><canvas width="200" height="100" id="cnv1"></canvas><br/>
<button id="clear_cnv">Clear</button> - <button id="setnr_cnv">Set Nr</button>
<script type="text/javascript">
// <![CDATA[
// function to clear the canvas ( https://coursesweb.net/ )
// cnv = the object with the canvas element
function clearCanvas(cnv) {
var ctx = cnv.getContext('2d'); // gets reference to canvas context
ctx.beginPath(); // clear existing drawing paths
ctx.save(); // store the current transformation matrix
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, cnv.width, cnv.height);
ctx.restore(); // restore the transform
}
// sets and adds a random number in canvas
// cnv = the object with the canvas element
function addNrCnv(cnv) {
// gets a random number between 1 and 100
var nr = Math.floor(Math.random() * 100 + 1);
var ctx = cnv.getContext('2d'); // gets reference to canvas context
// create text with the number in canvas (sets text color, font type and size)
ctx.fillStyle = '#00f';
ctx.font = 'italic 38px sans-serif';
ctx.fillText(nr, 80, 64);
}
// get a reference to the <canvas> tag
var cnv1 = document.getElementById('cnv1');
// register onclick event for #clear_cnv button to call the clearCanvas()
document.getElementById('clear_cnv').onclick = function() { clearCanvas(cnv1); }
// register onclick event for #setnr_cnv button to call the addNrCnv()
document.getElementById('setnr_cnv').onclick = function() { addNrCnv(cnv1); }
// ]]>
</script>
</body>
</html>