javascript - HTML5 Canvas 的环绕 : How to Get (Static) Shapes to Continue around Edges of Canvas

Question

我尝试在 HTML5 Canvas 上使用 Javascript 绘制平铺背景，但它不起作用，因为与 Canvas 边缘相交的形状不会环绕到另一侧。 (需要明确的是:这些是静态形状 - 不涉及时间运动。)如何让 Canvas 一侧中断的对象环绕到另一侧？

基本上，我正在寻找许多视频游戏使用的“环绕”效果——最著名的是《小行星》；我只是想要这种效果用于静态目的。 This page似乎是一个表明这是可能的例子。请注意屏幕右边缘上的小行星(无论是否移动)如何继续延伸到左边缘。或者就此而言， Angular 落里的一个物体被分割到所有四个 Angular 上。同样，不一定涉及任何 Action 。

有人知道我如何绘制一个正方形或一条环绕边缘的线吗？是否有某种 Canvas 或 JavaScript 选项？我使用明显关键字进行的谷歌搜索结果是空的。

---

编辑

为了提供更多背景信息，我的工作基于此处的示例:Canvas as Background Image 。 (也从这里链接:Use <canvas> as a CSS background。)重复图像没有问题。问题是让形状的 chop 部分环绕到另一侧。

Answer 1

我不确定你是如何设置图 block 的，但是，如果它们都是单个“包装器”幻灯片的一部分，并且在 0,0 处有自己的 x,x，那么你实际上可以绘制两次，或根据需要生成新幻灯片。希望这段代码能够更好地说明这个概念。

// Here, the 'tilegroup' is the same size of the canvas
function renderbg() {
    tiles.draw(tiles.posx, tiles.posy);
    if(tiles.posx < 0) 
        tiles.draw(canvas.width + tiles.posx, tiles.posy);
    if(tiles.posx > 0) 
        tiles.draw(-canvas.width + tiles.posx, tiles.posy);
}

基本上，这里的想法是绘制两次图 block 分组。一旦到达实际位置，再次填补空白。您仍然需要计算整个组何时完全离开 Canvas ，然后重置它，但希望这会引导您走向正确的方向!