Javascript 画布正弦文本滚动条

我试图在HTML5画布中创建正弦文本滚动动画，但我不知道如何以不同的方式设置每个字母的动画

我知道我可以使用

.split（“”）

获取包含字符串中所有字符的数组。我尝试使用

for

循环

for（var I=0；I

但这并没有达到我的预期（数组中的所有字符都被压缩在一起）。我希望有经验的人能在代码方面帮助我，并在代码中写评论，这样我就可以了解这一点

下面是我已经拥有的。正如您所看到的，它不会为每个字母设置动画。看看我想做什么

//画布
var c=document.getElementById（'c'）；
var ctx=c.getContext（'2d'）；
var seconds=Date.now（）；
var-offsetY=220；
var offsetX=490；
var chars='abc'；
var振幅=50；
var textcolor='#fff'；
var backgroundcolor='#000'；
//选择权
c、 高度=500；//帆布高度
c、 宽度=500；//画布宽度
函数animate（）{
变量y=数学地板（（Date.now（）-seconds）/10）/30；
var yPos=数学sin（（y））*振幅；
ctx.fillStyle=背景色；
ctx.fillRect（0，0，c.宽度，c.高度）；
ctx.fillStyle=textcolor；
ctx.fillText（字符、偏移量X-、偏移量+YPO）；
如果（偏移量x==0）{
offsetX=490；
}
//循环
请求动画帧（动画）；
}
//启动动画
请求动画帧（动画）

窦形卷轴
最好将字母扭曲成正弦波，因为一个字符到下一个字符的距离随着波形斜率的增加而增加。如果您避免扭曲，只需在
x
中以恒定速度实现波形，并在
y=sin（x）
中为每个字母实现波形，您将看到字符间间隙在正弦波的陡峭部分增长，并在最佳值附近缩小

无论如何，以下是简单的实现：


var text='品尝布巴可乐的美味'，
画布宽度=620，
画布高度=200，
右边缘缓冲=50；
WebFont.load（{//Web字体加载器：https://github.com/typekit/webfontloader
谷歌：{
族：['Source Sans Pro']
},
活动：完成字体加载时调用函数（）{//。
var canvas=document.getElementsByTagName（'canvas'）[0]，
context=canvas.getContext（'2d'），
yZero=画布高度/2，//设置轴位置和振幅
振幅=画布高度/4，//根据画布尺寸。
textColor='#fff'，
背景颜色='000'；
canvas.width=画布宽度；
canvas.height=画布高度；
context.font=“32px”源Sans-Pro'，monospace”；
var pos=canvasWidth；//将文本拆分为字符。
变量单位=text.split（“”）.map（函数（字符）{
var width=context.measureText（char）.width，
单位={char:char，width:width，pos:pos}；
pos+=width；//计算每个字符的像素偏移量。
返回单元；
});
var running=true，
lapTime；//在第一次动画调用之前设置此参数。
函数animate（）{
var currentTime=Date.now（），
dp=（currentTime-lapTime）/15；//以像素为单位的位移。
lapTime=当前时间；
context.fillStyle=背景色；
fillRect（0，0，画布宽度，画布高度）；
单位。forEach（函数（单位）{
unit.pos-=dp；//更新字符位置。
如果（unit.pos<-unit.width）{//从左向右环绕。
unit.pos+=画布宽度+右边缘缓冲区；
}
var y=数学sin（单位为pos/45）*振幅；
context.fillStyle=textColor；
context.fillText（unit.char、unit.pos、yZero+y）；
});
如果（正在运行）{
请求动画帧（动画）；
}
}
document.getElementById（'stopButton'）。onclick=function（）{
运行=错误；
};
lapTime=日期。现在（）；
请求动画帧（动画）；
}
});

停止观看视频，您希望扭曲字母，而不仅仅是设置其位置的动画。如果您只是想更改它们的位置，那么像最初尝试的那样使用
for
循环是可以的，您还需要设置它们的
x
位置。否则，就像你说的，它们将在相同的
x
位置“混在一起”。因此，您所做的很好，只需为每个角色增加
x
。如果您想在视频中复制效果，
fillText
不会有多大帮助。你可以和我更亲近，但这不一样。通过将每个字母的水平线映射为正弦波，视频中的字体被扭曲。你想做完全相同的事情还是只是一个近似值？这只是我想做的一个近似值。此时不需要扭曲文本。只是在向左滚动的同时上下移动。我现在添加了x坐标，这样我就可以看到所有的字符了。唯一缺少的是，他们喜欢在视频中单独上上下下。如果一个字符位于窦波的顶部，那么下一个字符将稍微低一点。我该怎么做？太棒了！我必须通读代码并努力更好地理解它。这正是我试图用我的代码来完成的。但正如我所看到的，这是一个更好的方法。非常感谢。