用canvas绘制重复正弦波

Question

我试着用正弦波的方式让图像水平流动，当它相对于它的画布大小达到它自己宽度的末端时，就会无缝地重复。

到目前为止，我已经得到图像重复和挥动，但有一个显著的跳跃时，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值最高)相差大约19度。然而，我真的不知道如何调整边界，使移动在多个阶段无缝。

这是小提琴：http://jsfiddle.net/3L7Dp/

Answer 1

周期变量需要根据移动的总距离x进行归一化。

在这种情况下，x将变为image.width，所以周期必须是：

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

这应该为循环图像提供一个可用的值。

改良小提琴

希望这能有所帮助！

Answer 2

一种方法是声明调整x的偏移量，例如var xOffset = 0。计算正弦时，使用x + xOffset。每次执行x -= imgW时，根据当前偏移量和图像宽度更新偏移量，以便位于新位置的sin将等于当前位置的sin。

这样做可以让你有任何时间，甚至是一个与你的图像宽度无关的时期。

我用许多简化方法制作了我自己的页面版本，您可以使用在这个JsFiddle中看到它。正弦波是无缝的。我的实现还支持比画布窄得多的图像--它们将贯穿始终被重复，总是填充画布(尝试在我的JsFiddle中使用JsFiddle来了解我的意思)。在我的函数中，由于我基于一定数量的x像素，我的xOffset重新计算是简化的，我可以简单地使用模数来计算减去x后的新偏移量。

我想提出的一些风格方面的考虑是：

• 使用更一致的变量名(例如context和ctx--如果确实需要这两种名称，请给它们前缀，例如baseContext、canvasContext，以便context在整个代码中保持一致)。
• 名称变量更接近于它们所代表的内容(例如，canvasX不是canvas.Width的好变量名。
• 不要害怕稍微长一些的变量名。imgW不像imageWidth那么清晰。W不总是表示宽度。
• 在逗号和单词function之后加上空格，以及操作符周围的空格。
• 在您的x函数中使用参数x是令人困惑的，因为x已经在外部声明了。

参数化您的动画函数是很好的，但同样好的是将整个脚本包装在一个SEAF (自动执行匿名函数)中，因为这恰当地给了所有变量一个作用域(将它们排除在全局范围之外)，从而通过不必传递变量来简化代码。