javascript - 使用canvas API绘制重复的正弦波

我试图让一个图像以正弦的方式水平流动，当它达到与画布大小相关的自身宽度的末端时无缝地重复。
到目前为止，我已经得到了图像重复和摆动，但有一个显着的跳跃时，X轴需要重置。
我认为问题出在这里：

 if (x > canvasX) {
            console.log('reset!!');
            x = canvasX-imgW;
            y = sineY(x);
        }
        //draw aditional image
        if (x > (canvasX-imgW)) {
            var ax = x-imgW+dx;
            y =  sineY(ax);
            ctx.drawImage(img,ax,y,imgW,imgH);
        }

最终，结果是重置x值的sineY与x值最高的正常周期结束时的sineY相差约19度。但是，我真的不知道如何调整边界，使运动在多个时段内无缝进行。
这是小提琴：http://jsfiddle.net/3L7Dp/

最佳答案

周期变量需要基于x移动的总距离进行规范化。
在这种情况下，x将变为image.width，因此period必须为：

var period = x / imgW;  //period must be a value in the range [0.0, 1.0]

这应该为循环图像提供一个可用的值。
Modified fiddle
希望这有帮助！

关于javascript - 使用canvas API绘制重复的正弦波，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23418971/