Javascript 如何在时间间隔后更新画布创建的图像上的文本

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

我用过：

clearRect0,0，画布。高度，画布。宽度

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

请建议

---

提前感谢

您可以使用不同的文本画布，并使用CSScanvas将其放置在图像画布上。这样，您可以在不影响图像画布的情况下对文本执行任何操作

或者，如果不需要画布图像，可以在背景中修复图像

请参见此处的解决方案：

var textcanvas=document.getElementById'text'； var ctx=textcanvas.getContext2d； ctx.font=30px Arial； ctx.fillStyle=白色； ctx.filltextworld，textcanvas.width/6，textcanvas.height/2； 函数changetexttext{ ctx.clearRect0,0，textcanvas.width，textcanvas.height； ctx.font=30px Arial； ctx.fillStyle=白色； ctx.fillTexttext，textcanvas.width/6，textcanvas.height/2； } img{ 宽度：200px； 高度：200px； 背景颜色：红色 } 正文{ 宽度：100px； 高度：100px； 位置：固定； 左：60px； 顶部：60px； } 更改文本替换clearRect。。。 具有drawImageimage、dx、dy

当文本写在画布上时，放置在画布上的图像将成为包含文本的图像，文本下的内容将被覆盖。同样，当图像写入画布时，它会覆盖以前的内容。drawImage执行您希望clearRect执行的操作，在画布上留下图像但没有文本

或者，如果画布不仅仅是一个图像，或者正在改变：

当您或其他人希望在6个月或一年后更改内容时，在图像画布上使用两个画布元素（文本画布）可以简化可读性和编程。示例显示使用内联样式时，您当然希望将内联样式移动到样式表中

<div id="canvasShell" style="position:relative;width:**EnterValue**;height:**EnterValue**">
<canvas id="ctxBackground" style="position:absolute"></canvas>
<canvas id="ctxText" style="position:absolute></canvas>
</div>

---

注意，您还必须具有正确的外壳宽度和高度值，否则画布元素将被放置在页面上其他内容的顶部。

只需重新绘制背景，drawImage速度很快。使用clearRect时，它会删除文本以及文本下方的圆圈。但我只想删除文本。我尝试了您的解决方案，但在使用两个画布时，每个画布的垂直位置是不同的。我想把一个画布放在另一个画布上。请建议。抱歉，将两个画布元素的样式设置为位置：绝对；第一个元素是先绘制，第二个元素在其上渲染。外壳必须处于相对位置；元素堆叠在彼此的顶部，只需使用其中一个带有position:absolute样式的画布即可完成，但该画布将绘制在未定位元素的顶部，使可读性变得困难。。。如果最后一个画布是position:absolute，则会将其垂直放置在另一个画布的下方，除非也使用top:0px。