Question

我已将文字放在<canvas>标记的图片上（文字来自输入框）。

现在，如果我在<canvas>上添加新文字，则会强加于之前的文字。在放入新文本之前，如何清除画布上的现有文本？

我尝试通过分配canvas.width来重置画布，但文本保持打开状态。有人帮忙吗？

Answer 1

如果您知道要添加和删除大量文本，那么跟踪旧文本可能是有意义的。然后你可以使用它：

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

这样您就不必每次都重绘整个画布。

Answer 2

您使用context.clearRect（），但首先必须弄清楚要清除的矩形。这基于许多因素，例如文本的大小和最初绘制文本时画布上下文的textAlign属性。下面的代码用于绘制文本到画布上下文的对象的绘制方法，因此它具有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;
}

Answer 3

你需要使用clearRect（x，y，w，h）;更多详情请见MDC

Answer 4

如果你不能在文本的同一区域清除其他图纸，另一种解决方案是使用两个画布，一个在另一个上：

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

然后，您可以使用第一个不需要删除的静态绘图，另一个使用动态绘图。在您的情况下，您可以将文本放在动态画布中，然后再使用clearRect将其删除。

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

Answer 5

在放下一段文字之前，我不确定如何清除图像上的文字。

如果画布的背景是恒定的;并且您只需更改文本就可以将两个画布元素分层。背景，以及可以删除的文本的透明顶层，以及在您想要更新文本时插入的新文本。

Answer 6

在绘制新文本之前，您需要重新绘制图像。

Answer 7

不确定它是否可行，但您可以尝试重新绘制背景颜色的文本

Answer 8

将画布放在另一个div或容器中

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

清除容器的HTML

canvasHold.innerHTML=""

然后用新画布替换它。

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

使用新文字重新提交新画布

Answer 9

这是最好的方法，它对我有用。清除功能只是清除recaptcha。所以刷新的时候就调用这个函数。

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

如何从<canvas>元素中清除文本？</canvas>

9 个答案: