HTML5 2D 游戏开发 图形和动画（5）滚动背景

look_w

滚动背景Snail Bait 的背景（如图 3 所示）在水平方向缓慢滚动：
图 3. 背景图像因为背景的左右边缘是完全相同的，所以背景可以无缝地滚动，如图 4 所示：
图 4. 完全相同的边缘实现平滑的过渡（左：右边缘；右：左边缘）Snail Bait 通过绘制两次背景，使背景无休止地滚动，如图 5 所示。最初，如图 5 的顶部截屏所示，左侧的背景图像完全在屏幕上，而右侧的背景图像则完全在屏幕外。随着时间的推移，背景开始滚动，如图 5 的中部和底部截屏所示：
图 5. 从右侧滚动到左侧：半透明区域代表在屏幕外的图像部分清单 10 显示了与  有关联的代码。drawBackground() 函数绘制两次图像，试着在同一位置上进行绘制。明显的滚动由不断将画布坐标系统平移到左侧而显示的，使得背景看似滚动到了右侧。
（您如何理解平移到左侧，但滚动到右侧的明显矛盾：将画布想象为在一张很长的纸上的一个空图片帧。这张纸就是坐标系，将它向左侧平移，就像将它在帧[画布]下面向左侧滑动左侧一样，因此，画布看起来就移动到右侧。）
清单 10. 滚动背景

1 2 3 4 5 6 7 8 9 10 11 12 13

var backgroundOffset; // This is set before calling drawBackground() function drawBackground() {    context.translate(-backgroundOffset, 0);    // Initially onscreen:    context.drawImage(background, 0, 0);    // Initially offscreen:    context.drawImage(background, background.width, 0);    context.translate(backgroundOffset, 0); }

setBackground() 函数在水平方向平移画布上下文 -backgroundOffset 像素。如果 backgroundOffset 是正数，那么背景会向右侧滚动；如果它是负数，那么背景会向左侧滚动。
在平移背景之后，drawBackground() 绘制了两次背景，然后将上下文平移回它在调用 drawBackground() 之前的位置。
一个看似琐碎的计算仍然保留：计算 backgroundOffset，这决定了为每个动画帧将画布的坐标系统平移多远。虽然该计算本身确实是琐碎的，但它具有重要的意义，所以我接下来将会讨论它。