我正在开发一个 HTML5 Canvas 项目，并在屏幕上绘制了一些文本。现在，它出现并停留在那里，但我需要它在几秒钟后消失，这样每次调用它时，它就不仅仅是在旧文本之上绘制新文本。
我尝试了 clearRect() 但这完全清除了整个矩形并删除了我的一些背景，这是我不想要的。
有没有办法做到这一点？
我正在用这个基本功能绘制文本：
function drawText() {
ctx.font = "30px Arial";
ctx.fillText("Please wait...", 575, 130);
}
【问题讨论】：
标签： javascript html text html5-canvas
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<button onclick="showTheText()">Click to show text</button>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function showTheText() {
var myText = {
text: 'Hello World',
x: 0,
y: 75,
fill: 1
};
drawText(myText, context);
// wait one second before starting animation
setTimeout(function() {
animate(myText, canvas, context);
}, 1000);
}
function drawText(myText, context) {
context.font="30px Arial";
context.fillStyle="rgb(0, 0, 0, " + myText.fill + ")";
context.fillText(myText.text, myText.x, myText.y);
}
function animate(myText, canvas, context) {
// clear
context.clearRect(0, 0, canvas.width, canvas.height);
// !!!!!!!! redraw your background !!!!!!!!
// then redraw your text with new opacity
myText.fill -= .1;
drawText(myText, context);
// request new frame
if (myText.fill > -.1) {
setTimeout(function() {
animate(myText, canvas, context);
}, 2000 / 60);
}
}
</script>
</body>
</html> 希望这可以帮助你。它的作用是立即绘制文本（以及背景的其余部分，您没有提供），然后设置一个递归超时，该超时将清除矩形，重绘背景，减少应用于文本的不透明度填充，并重绘文本。您可以通过更改上次 setTimeout 的时间来减慢它。
我从这个例子中改编了它：https://www.html5canvastutorials.com/advanced/html5-canvas-animation-stage/
【讨论】：
在 clearText 函数中实现下面的 fillStyle 选项的预期用途
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function drawText() {
clearText()
ctx.font = "30px Arial";
ctx.fillStyle = "black";
ctx.fillText("Please wait...", 575, 130);
}
function clearText() {
ctx.font = "30px Arial";
ctx.fillStyle = "white";
ctx.fillText("Please wait...", 575, 130);
}<button onclick="drawText()">draw text</button><br>
<canvas id="myCanvas" width="800" height="800"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
code sample - https://codepen.io/nagasai/pen/oqOXxz【讨论】：
一旦您将文本绘制到画布上，它就不再是文本 - 它只是一堆像素！由于这些像素会覆盖已经存在的内容，因此无法仅删除文本。
如果你想摆脱它，通常你可以做的是重新绘制没有文字的整个场景。
您也可以尝试使用背景颜色在相同位置重新绘制文本，这会删除文本，但这仅在文本位于纯色背景上时才有效。
【讨论】：
你可以创建一个简单的函数来删除， 您将需要一些值。例如，字体高度。字符宽度...等， 例如在这种情况下，您可以使用以下功能，只需稍作修改：
function removeText(x,y,txt_length,font_height,char_width,ctx) {
ctx.clearRect(x, y-font_height ,char_width*txt_length,font_height);
}
这个函数用来写你的字符串：
function drawText(x,y,text,ctx) {
ctx.font = "30px Arial";
ctx.fillText(text,x,y);
}
相同的参数x和y被传递给函数和txt_length = text.length;
【讨论】：