清除Javascript画布上的文本

几个小时以来，我一直在努力清除Javascript画布上的文本，但无论我做什么，我都无法找到一个可接受的解决方案。 我尝试过的事情：

• 使用clear rect清除文本周围的区域问题：这对我想要的东西不够精确
• 将文本颜色设置为背景颜色，并在文本上书写问题：笔划未完全清除。在经历了很多痛苦之后，我发现你可以调整画布的线条宽度，使笔划更大，但即使这样也不能100%起作用
• 只使用笔划文本，不使用填充问题：似乎不起作用，尽管我可能做错了，老实说，即使它起作用了，也不会看起来那么好
• 将文本的颜色设置为背景的颜色并在文本上书写，但这一次复制并粘贴完全相同的代码行多次问题：这可能是我找到的最接近实际工作的解决方案，但这似乎并不正确，因为当我说我多次使用完全相同的代码行时，我并没有夸大。这似乎意味着每次运行该行代码时，我都会得到不同的结果。总的来说，我可能可以用它作为解决方案，但我觉得它最终可能会减慢我的代码，所以我宁愿把它作为最后的手段

我是基于这个代码的，并且尝试不使用p5.js来实现它。无论如何，在这一点上，我只是更恼火的是，它是如此的难以清除的文本，因为我已经用谷歌搜索了这个问题，在许多不同的方式，我可以想到，并一直无法找到解决办法。我在下面附上了我的代码以供参考

类粒子{
构造函数（）{
这个.x=0；
这个。y=0；
这个速度=1；
这个宽度=30；
this.font=this.width+“px单空格”
这个.剩余=[]；
这是reset（）；
}
重置（）{
this.x=Math.random（）*innerWidth；
this.y=（Math.random（）*10）+10；
this.width=（Math.random（）*20）+10；
this.font=this.width+“px单空格”
this.speed=（Math.random（）*0.8）+0.4；
}
更新（）{
if（this.y>（内部高度+此.width））{
这是reset（）；
}
this.y+=this.speed*12；
}
画（）{
ctx.font=this.font；
ctx.fillStyle=“黑色”；
for（设i=0；i<1；i++）{
如果（this.residence.length>0）{
设tempY=this.residence.pop（）；
设tempChar=this.residence.pop（）；
ctx.lineWidth=4；
ctx.strokeStyle=“黑色”；
strokeText（tempChar，this.x，tempY）；
ctx.fillText（tempChar，this.x，tempY）；
}
}
ctx.font=this.font；
ctx.fillStyle=“石灰”；
for（设i=0；i<1；i++）{
让char=String.fromCharCode（Math.floor（（Math.random（）*109）+33））；
这个.residence.push（char）；
这个.剩余.推（这个.y）；
ctx.lineWidth=1；
ctx.fillText（char，this.x，this.y-（this.width*0））；
}
}
}
var-run=true；
var粒子=[]；
var canvas=document.createElement（'canvas'）；
var body=document.getElementsByTagName（“body”）[0]；
body.appendChild（画布）；
var ctx=canvas.getContext（“2d”）；
canvas.width=内部宽度；
canvas.height=内部高度；
设置间隔（本图为100）；
函数绘图（）{
document.body.onkeyup=函数（e）{
如果（e.key='f'）{
跑=！跑；
}
}
如果（！运行）{
返回；
}
如果（粒子长度<120）{
粒子。推（新粒子（））；
}
for（设i=0；i

html，正文{
保证金：0；
溢出：隐藏；
}
身体{
背景：黑色；
}
输入{
位置：固定；
顶部：10px；
左：10px；
}

基质雨

也许我没有真正理解你的观点——但为什么不在调用每个粒子的绘制方法之前，简单地清除整个画布一次呢？@Understand我想我在这一点上睡眠不足，所以我把它作为一个可行的解决方案，因为我一直在思考如何清除所有粒子，我想我只是不想看到你的评论后，我加了一行这样做，效果非常好。我仍然认为应该有一种方法来澄清文本，但这似乎是最简单的解决方案。谢谢。呵呵，不客气。我知道疲倦的感觉