Javascript HTML5画布的环绕：如何获得（静态）形状以继续围绕画布边缘

我试图在HTML5画布上使用Javascript绘制一个平铺背景，但它不起作用，因为与画布边缘相交的形状不会缠绕到另一侧。（需要明确的是：这些是静态形状--不涉及时间上的运动。如何让画布一侧打断的对象缠绕到另一侧

基本上，我在寻找许多视频游戏使用的“环绕”效果——最著名的是小行星；我只是想让这种效果达到静态的目的。这似乎是一个表明这是可能的例子。请注意屏幕右边缘的小行星（无论是否移动）是如何继续向左边缘移动的。或者，角点中的一个对象在所有四个角点之间分割。同样，不一定涉及任何动议

有人知道我怎么画，比如说，一个正方形或者一条围绕边缘的线吗？对于canvas或Javascript是否有某种选择？我的谷歌搜索使用了明显的关键词，结果是空的

---

编辑

---

为了提供更多的上下文，我的工作基于以下示例：。（此处链接：）重复图像没有问题。问题是让形状的截断部分环绕到另一侧。

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

// 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);
}

//这里的“tilegroup”与画布的大小相同
函数renderbg（）{
tiles.draw（tiles.posx，tiles.posy）；
如果（tiles.posx<0）
tiles.draw（canvas.width+tiles.posx，tiles.posy）；
如果（tiles.posx>0）
tiles.draw（-canvas.width+tiles.posx，tiles.posy）；
}

---

所以基本上，这里的想法是画两组瓷砖。一旦在它的实际位置，再次填补空白。您仍然需要计算整个组何时完全离开画布，然后将其重置，但希望这能引导您朝着正确的方向前进

您可以始终在画布中创建可翻的图像，生成一个toDataUrl（），然后将该数据url作为背景分配给某个对象，并让CSS进行平铺。。只是一个想法

编辑：如果您在绘制可耕地图像时遇到问题，可以创建一个3*widthx3*width的画布，以常规方式绘制（假设您从数据的中心正方形获取数据作为最终结果），然后查看是否无法从画布的子集绘制到画布本身。看起来您必须使用：

var myImageData=context.getImageData（左、上、宽、高）； putImageData（myImageData，dx，dy）

（有适当的测量）

编辑II：这个想法是，你将有一个足够大的画布，其中有一个感兴趣的中心区域，周围的缓冲区足够大，可以容纳你可能绘制的任何形状，如下所示：

XXX  
XCX
XXX

您可以在这个大画布上绘制一次形状，然后盲目地将围绕该中心区域的每个区域

X

绘制到中心区域（然后清除这些区域以进行下一次绘制）。因此，如果K是图形的数量而不是4*K绘制，则有K+8个绘制（然后清除8个）。显然，这种方法的实际适用性取决于形状和重叠关注点的数量，尽管我打赌它可以调整。根据形状的复杂程度，可以按照您最初的想法绘制形状4次，或者绘制到某个缓冲区或缓冲区，然后绘制其像素数据4次或其他。我承认，这是我突然想到的一些想法，所以我可能错过了一些东西

---

编辑三：真的，你可以聪明一点。如果知道一组对象将如何重叠，则只需从缓冲区绘制一次。假设你在一行中有一堆形状，它们只画向北部重叠区域。您所需要做的就是绘制这些形状，然后将北部重叠区域绘制到南侧。毛茸茸的区域应该是角落，但我不认为它们真的有毛，除非形状很大。。。。唉。。在这一点上，我可能需要安静下来，看看是否有任何现有的实现我所说的，因为我不确定我的即兴写作是否有助于任何人

嗨，迈克，谢谢你的回复。我的问题似乎不够清楚。上下文是静态扩展模式，而不是移动点对象。请注意，在小行星游戏中，屏幕右边缘的小行星（无论是否移动）是如何在左边缘继续的。或者说，一个角落里的一个物体在四个角落里被分割。这就是我要问的。我会更新问题，让它更清楚。谢谢，迈克。事实上，我必须画四次（每个维度两次），这并不是我想要的那么优雅的解决方案。但至少这是一个解决方案！不幸的是，我不确定您是否会找到替代/优雅的解决方案。我相信小行星游戏在

gamelib-min.js

，第332行，在

game.Util.renderImage

中也做了类似的事情。（使用Chrome进行漂亮的打印）谢谢，JayC。

toDataUrl（）

很有趣，但我不知道它是如何解决我的问题的，这是关于wrapparound的。如果我错了，请纠正我，但听起来我仍然需要画四次边缘形状，正如我在给Mike J m的回复中提到的那样。我的解决方案不是你必须画四次形状，而是你必须画一个或多个形状，然后画它周围的区域（然后为下一组形状清除它周围的区域）. 等一下，这有点难以解释