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值最高的常规周期结束时的sineY相差大约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]

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

<强> Modified fiddle

希望这有帮助！

Answer 2

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

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

我使用了许多简化版本创建了自己的页面版本，您可以see it in this JsFiddle。正弦波是无缝的。我的实现也支持比画布窄得多的图像 - 它们将一直重复，总是填充画布（在我的JsFiddle中尝试img.width = 100看看我的意思）。在我的函数中，由于我将周期基于一定数量的x像素，我的xOffset重新计算得到了简化，我可以简单地使用模数来计算从x减去后的新偏移量。

我想建议的一些风格考虑因素是：

使用更一致的变量名称（例如context与ctx - 如果两者都是真正需要的，请为它们添加前缀，例如baseContext，canvasContext以便{ {1}}在整个代码中都是一致的。）
更接近其代表的名称变量（例如，context不是canvasX的良好变量名称。
不要害怕稍长的变量名称。 canvas.Width不如imgW明确。 W并不总是指宽度。
在逗号和单词imageWidth以及操作符周围添加空格。
在function函数中使用参数x会让人感到困惑，因为sineY已在外面宣布。

参数化你的动画函数很好，但同样好的是将整个脚本包装在SEAF（self-executing anonymous function）中，因为它正确地为所有变量提供了一个范围（使它们不在全局范围内），因此通过不必传递变量来简化代码。

用帆布api绘制重复的正弦波

2 个答案: