Html 如何清除 <canvas> 元素中的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3543687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I clear text from the <canvas> element?
提问by redGREENblue
I have put text on an image in a <canvas>tag (the text was taken from an input box).
我在<canvas>标签中的图像上放置了文本（文本是从输入框中获取的）。
Now if I put a new text on the <canvas>, it is imposed on the previous text. How do I clear the existing text on the canvas before putting in the new text?
现在，如果我在 上放置一个新文本<canvas>，它会强加于之前的文本。在放入新文本之前，如何清除画布上的现有文本？
I have tried resetting the canvas by assigning canvas.widthbut the text stays on. Any help people?
我尝试通过分配重置画布，canvas.width但文本保持不变。有帮助的人吗？
回答by Skunkwaffle
If you know you're going to be adding and removing text a lot, it might make sense to keep track of the old text. Then you could just use this:
如果您知道将要大量添加和删除文本，那么跟踪旧文本可能是有意义的。然后你可以使用这个：
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);
This way you don't have to redraw the whole canvas every time.
这样您就不必每次都重新绘制整个画布。
回答by charlie roberts
You use context.clearRect(), but first you have to figure out the rectangle to clear. This is based off a number of factors, such as the size of the text and the textAlign property of the canvas context when the text was originally drawn. The code below would be for the draw method of a object that draws text into a canvas context, as such it has properties for x, y, text size, horizontal alignment etc. Note that we always store the last piece of text drawn so we can clear an appropriately sized rectangle when the value is next changed.
您使用 context.clearRect()，但首先您必须找出要清除的矩形。这基于许多因素，例如文本的大小和最初绘制文本时画布上下文的 textAlign 属性。下面的代码用于将文本绘制到画布上下文中的对象的 draw 方法，因此它具有 x、y、文本大小、水平对齐等属性。请注意，我们始终存储绘制的最后一段文本，因此我们可以在下次更改值时清除适当大小的矩形。
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;
}
回答by MazarD
If you can't clear other drawings in the same area of the text, another solution is to have two canvas, one over the other:
如果您无法清除文本同一区域中的其他绘图，另一种解决方案是使用两个画布，一个在另一个上：
<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>
Then you can use the first for static drawings that don't need to be removed, and the other one with dynamic drawings. In your case you can put the text in the dynamic canvas and remove it with clearRect before drawing again.
然后您可以将第一个用于不需要删除的静态图，另一个用于动态图。在您的情况下，您可以将文本放在动态画布中并在再次绘制之前使用 clearRect 将其删除。
context.clearRect(0, 0, canvas.width, canvas.height);
回答by Divya Manian
回答by NickSlash
I'm not sure about how to clear the text off the image before you put the next piece of text.
我不确定如何在放置下一段文本之前清除图像上的文本。
If the background of the canvas is constant; and your only changing the text you could layer two canvas elements. The background, and a transparent top layer for text that can be removed and a new one inserted when you want to update the text.
如果画布的背景是恒定的；并且您唯一更改的文本可以将两个画布元素分层。背景和一个透明的文本顶层，可以删除，当你想更新文本时插入一个新的。
回答by Castrohenge
You will need to redraw the image before drawing the new text.
在绘制新文本之前，您需要重新绘制图像。
回答by joshtronic
not sure if it would work, but you could try redrawing the text in the background color
不确定它是否有效，但您可以尝试以背景颜色重新绘制文本
回答by coolplays
Put the canvas in an other div or container
将画布放在另一个 div 或容器中
<div id=canvasHold><canvas id=myCanvas></canvas></div>
Clear that container's HTML
清除该容器的 HTML
canvasHold.innerHTML=""
Then replace it with a new canvas.
然后用新画布替换它。
canvasHold.innerHTML="<canvas id=myCanvas></canvas>"
Resubmit new Canvas with new text
使用新文本重新提交新画布
