javascript - 如何在时间间隔后更新 Canvas 创建的图像上的文本

Question

我正在开发移动应用程序，我在其中使用 Canvas 创建图像，然后在该图像上写入文本，我想在一段时间后更新该文本。

我用过:

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

清除文本但它清除整个 Canvas ，或者当我们通过提供坐标使用 clearRect 时它清除该特定部分的文本和图像颜色，但我想清除文本或更新文本而不是背景图像。

请提出建议。

提前致谢

Answer 1

您可以为文本使用不同的 Canvas ，并使用 CSS 将其放置在图像 Canvas 上( Canvas 是透明的)。这样，您可以在不影响图像 Canvas 的情况下对文本执行任何操作。

或者如果你不需要 Canvas 图像，你可以在后台修复图像

请在此处查看解决方案:https://stackoverflow.com/a/18432212/7549867

var textcanvas= document.getElementById('text');
var ctx = textcanvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillStyle = "white";
ctx.fillText("Hello World",textcanvas.width/6, textcanvas.height/2); 

function changetext(text){
ctx.clearRect(0,0,textcanvas.width, textcanvas.height);
ctx.font = "30px Arial";
ctx.fillStyle = "white";
ctx.fillText(text,textcanvas.width/6, textcanvas.height/2);
}

#img{
  width:200px;
  height:200px;
  background-color:red
}

#text{
  width:100px;
  height:100px;
  position:fixed;
  left:60px;
  top:60px;
}

<canvas id="img"></canvas>
<canvas id="text"></canvas>
<button type="button" onclick="changetext('Text Changed!')">Change Text</button>