Question

我正在开发移动应用，我正在使用画布创建图像，然后在该图像上写文字，我希望在一段时间后更新该文本。

我用过：

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

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

请建议。

提前谢谢

Answer 1

您可以对文本使用不同的画布，并使用CSS将其放置在图像画布上（画布是透明的）。这样，您可以对文本执行任何操作，而不会影响图像画布。

或者，如果您不需要画布图像，则可以在后台修复图像

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

＆＃13;

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

＆＃13;

#img{
  width:200px;
  height:200px;
  background-color:red
}

#text{
  width:100px;
  height:100px;
  position:fixed;
  left:60px;
  top:60px;
}

＆＃13;

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

＆＃13;

Answer 2

替换clearRect（...） with drawImage（image，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>

请注意，您还必须具有正确的shell宽度和高度值，否则canvas元素将放置在页面上的其他内容之上。

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

2 个答案: