Question

我正在尝试在HTML5画布上使用Javascript绘制平铺背景，但它不起作用，因为与画布边缘相交的形状不会环绕到另一侧。（只是要清楚：这些是静态形状 - 没有及时动作。）如何让画布一侧中断的物体环绕到另一侧？

基本上我正在寻找许多视频游戏使用的“环绕式”效果 - 最着名的是小行星;我只是希望这个效果符合静态目的。 This page似乎是一个表明它有可能的例子。请注意，屏幕右边缘上的小行星（无论是否移动）如何继续向左边缘移动。或者就此而言，角落中的物体在所有四个角之间分开。同样，不一定涉及任何动议。

任何人都有任何线索，我可以画一个包围边缘的正方形或线条？是否有一些画布或Javascript选项？我使用明显关键字进行的谷歌搜索是空的。

<小时/>

修改

为了给出一些更多的背景，我的工作基于这里的例子：Canvas as Background Image。（也从这里链接：Use <canvas> as a CSS background。）重复图像没问题。问题是让截断的形状部分绕到另一边。

Answer 1

我不确定你是如何设置瓷砖的，但是，如果它们都是一个单独的'包装'幻灯片的一部分，它有自己的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);
}

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

Answer 2

您总是可以在画布中创建可填充图像，生成toDataUrl（），然后将该数据URL作为背景分配给某些东西，让CSS进行平铺......只是一个想法。

编辑：如果您在绘制可填充图像时遇到问题，可以创建一个3 * widthx3 *宽度的画布，在其上绘制为常规画面（假设您从数据的中心方块获取数据作为最终结果），并且然后看看你是否无法从画布的子集中绘制到自身。看起来你必须使用：

var myImageData = context.getImageData（left，top，width，height）; context.putImageData（myImageData，dx，dy）;

（通过适当的测量）

https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas/

编辑II：我的想法是你有一个足够大的画布，它有一个感兴趣的中心区域，周围的缓冲区大到足以说明你可能画出的任何形状，如下所示：

XXX  
XCX
XXX

您可以将形状绘制一次到这个大画布，然后盲目地将该中心区域周围的每个区域X绘制到中心区域（然后清除这些区域以进行下一个绘图）。因此，如果K是形状的数量而不是4 * K的绘制，则表示K + 8绘制（然后是8个清除）。显然，这种实际适用性取决于形状的数量和重叠的问题，尽管我打赌它可以调整。根据形状的复杂程度，按照您最初的想法绘制形状4次，或绘制到某个缓冲区或缓冲区域，然后将其像素数据绘制4次或其他内容可能是有意义的。我承认，这是一个想法，只是突然出现，所以我可能会遗漏一些东西。

编辑III：真的，你可能会很聪明。如果你知道一组对象将如何重叠，你应该只需要从缓冲区中抽取一次。假设你有一堆形状连续只绘制到北方重叠区域。您需要做的就是绘制这些形状，然后将北部重叠区域绘制到南侧。多毛的区域将是角落，但我不认为它们真的变得多毛，除非形状很大.... 叹息 ..此时我可能需要安静下来看看是否有我所说的任何现有的实现，因为我不确定我的写作是袖手旁观帮助任何人。

HTML5 Canvas的环绕声：如何获取（静态）形状在画布的边缘周围继续

修改

2 个答案: