Html5 canvas 如何使用画布制作垂直波浪？

我通过添加文本而不是图像来更改图像。
我想波浪是垂直向下的。我知道有一点编辑，但我尝试了不同的选择，但没有成功

var选项={
期间：100，
挤压：0，
波长：40，
振幅：30，
底纹：300，
fps:30
}
var ca=document.getElementById（'canvas'）；
var ctx=ca.getContext（'2d'）；
ctx.canvas.width=400；
ctx.canvas.height=150；
ctx.font='bold 45pt Arial'；
ctx.textAlign='中心'；
ctx.fillStyle='蓝色'；
ctx.fillText（'helloworld'，170,60）；
w=画布宽度，
h=画布高度，
od=ctx.getImageData（0，0，w，h）.data；
setInterval（函数（）{
var id=ctx.getImageData（0,0,w,h），
d=id数据，
现在=（新日期（））/options.period，
Y
x,，
拉斯托，
阴凉处
sq=（y-h/2）*选项。压缩，
二甲苯，
PCT
啊,，
y2，
opx；
对于（y=0；yy2=y+（o+sq*pct）只需翻转数值，使x受影响，而不是y-

... vars cut, but replace y2 with x2 ...

/// reversed from here
for (x = 0; x < w; x += 1) {

    lastO = 0;
    shade = 0;
    sq = (x - w * 0.5) * options.squeeze;

    for (y = 0; y < h; y += 1) {

        px = (y * w + x) * 4;
        pct = y / h;
        o = Math.sin(y/options.wavelength-now) * options.amplitude * pct;

        /// the important one: you might need to compensate here (-5)
        x2 = x - 5 + (o + sq * pct) | 0;

        opx = (x2 + y * w) * 4;

        shade = (o - lastO) * options.shading;
        d[px] = od[opx] + shade;
        d[px + 1] = od[opx + 1] + shade;
        d[px + 2] = od[opx + 2] + shade;
        d[px + 3] = od[opx + 3];
        lastO = o;
    }    
}
ctx.putImageData(id, 0, 0);

…变截面，但将y2替换为x2。。。
///从这里倒转过来
对于（x=0；x

请告诉我如何优化脚本，使其达到30fps，阴影并不重要，只是因为出现了一波文字。