Javascript 如何像文本栏动画一样在画布内移动文本？

我正在绘制画布，并加入了一些形状和文本，我想在画布内移动文本，就像从左到右设置了动画的文本栏一样 正如你所看到的，当我移动文本时，它的移动并不像预期的那样

我怎样才能修好它

变量pointX，pointY，w，h；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
c、 宽度=window.innerWidth；
c、 高度=窗内高度；
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
ctx.beginPath（）；
ctx.strokeStyle='red'；
ctx.strokeRect（10,0720576）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.fillStyle='grey'；
ctx.fillRect（10525720,50）；
ctx.closePath（）；
ctx.beginPath（）；
var启动=10；
setInterval（函数（）{
开始+=4；
ctx.font=“30px Arial”；
ctx.fillStyle=“红色”；
ctx.textAlign=“左”；
ctx.fillText（“你好，世界”，start，560）；
}, 40);
ctx.closePath（）；
点x=690；
尖头y=550；
w=30；
h=20；
ctx.beginPath（）；
ctx.strokeStyle='red'；
ctx.strokeRect（点x，点y，w，h）；
ctx.closePath（）；

---

正如我所评论的，在

setInterval

函数中，您应该添加

ctx.clearRect（0,0，c.width，c.height）

。此外，你还必须重新绘制所有其他内容。所以我把你的形状放在函数里面，我也在

setInterval

里面调用这些函数

var pointX，pointY，w，h；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
c、 宽度=1000；
c、 高度=650；
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
函数drawShape1（）{
ctx.beginPath（）；
ctx.strokeStyle='red'；
ctx.strokeRect（10,0720576）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.fillStyle='grey'；
ctx.fillRect（10525720,50）；
ctx.closePath（）；
}
函数drawShape2（）{
点x=690；
尖头y=550；
w=30；
h=20；
ctx.beginPath（）；
ctx.strokeStyle='red'；
ctx.strokeRect（点x，点y，w，h）；
ctx.closePath（）；
}
var启动=10；
setInterval（函数（）{
ctx.clearRect（0,0，c.宽度，c.高度）
drawShape1（）
开始+=4；
ctx.font=“30px Arial”；
ctx.fillStyle=“红色”；
ctx.textAlign=“左”；
ctx.fillText（“你好，世界”，start，560）；
drawShape2（）
}, 40);


变量pointX，pointY，w，h；
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
c、 宽度=1000；
c、 高度=650；
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
函数drawShape1（）{
ctx.beginPath（）；
ctx.strokeStyle='red'；
ctx.strokeRect（10,0720,70）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.fillStyle='gold'；
ctx.fillRect（10,10720,50）；
ctx.closePath（）；
}
函数drawShape2（）{
点x=690；
尖Y=30；
w=30；
h=20；
ctx.beginPath（）；
ctx.strokeStyle='red'；
ctx.strokeRect（点x，点y，w，h）；
ctx.closePath（）；
}
var启动=10；
函数框架（）{
requestAnimationFrame（帧）
ctx.clearRect（0,0，c.宽度，c.高度）
drawShape1（）
启动+=2；
ctx.font=“30px Arial”；
ctx.fillStyle=“红色”；
ctx.textAlign=“左”；
ctx.fillText（“你好，世界”，开始，50）；
如果（start>576）start=0；
drawShape2（）
}
框架（）
在
setInterval
函数中添加
ctx.clearRect（0,0，c.width，c.height）
。另外，我建议使用
requestAnimationFrame
而不是
setInterval
将其添加到setInterval函数中时，文本会移动，但会删除我绘制的所有形状。我希望形状保持不变，因为它们只是移动文本。我在这里问了这个问题