1

我通过添加文本而不是图像来更改脚本。
我想挥手是垂直向下的。我知道有点编辑，但我尝试了不同的选项，但没有奏效。

http://jsfiddle.net/7ynn4/3/

var options = {
    period:100,
    squeeze:0,
    wavelength:40,
    amplitude:30,
    shading: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 = 'center';
ctx.fillStyle = 'blue';
ctx.fillText('Hello World', 170, 60);

w = canvas.width,
h = canvas.height,
od = ctx.getImageData( 0, 0, w, h ).data;

setInterval(function() {
        var id = ctx.getImageData( 0, 0, w, h ),
                d = id.data,
                now = ( new Date() )/options.period,
                y,
                x,
                lastO,
                shade,
                sq = ( y - h/2 ) * options.squeeze,
                px,
                pct,
                o,
                y2,
                opx;

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

            lastO = 0;
            shade = 0;
            sq = ( y - h/2 ) * options.squeeze;

            for ( x = 0; x < w; x += 1 ) {

                px  = ( y * w + x ) * 4;
                pct = x/w;
                o   = Math.sin( x/options.wavelength - now ) * options.amplitude * pct;
                y2  = y + ( o + sq * pct ) << 0;
                opx = ( y2 * w + x ) * 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 );

    },

    1000/options.fps

);
4

1 回答 1

0

您只需翻转值，以便影响 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);

修改后的小提琴在这里

于 2013-09-26T05:54:54.303 回答