HTML5画布的包装:如何使(静态）形状在画布边缘周围继续

Wraparound for HTML5 Canvas: How to Get (Static) Shapes to Continue around Edges of Canvas

本文关键字：布边缘 边缘 继续 周围 何使 HTML5 静态 包装      更新时间：2023-09-26

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

基本上，我在寻找许多电子游戏使用的"环绕"效果——最著名的是《小行星》；我只想在这里得到一个静态的效果。这个页面似乎是一个例子，表明这是可能的。请注意，例如，屏幕右边缘的小行星（无论是否移动）是如何继续移动到左边缘的。或者就这一点而言，角落里的一个物体被分成四个角落。同样，不一定涉及任何动议。

有人知道我如何画出一个正方形或一条围绕边缘的线吗？画布或Javascript可能有某种选择吗？我在谷歌上用明显的关键词搜索结果都是空的。

<小时>

编辑

为了提供更多的上下文，我的工作基于这里的例子：画布作为背景图像。（也从这里链接：使用<canvas>作为CSS背景。）重复图像没有问题。问题是将形状的截断部分包裹到另一侧。

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

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

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

编辑：如果你在绘制可耕种的图像时遇到问题，你可以创建一个3*宽x3*宽的画布，在上面按规则绘制（假设你从数据的中心正方形获取数据作为最终结果），然后看看你是否不能从画布的子集绘制到画布本身。看起来你必须使用：

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

（通过适当的测量）

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

编辑二：这个想法是，你应该有一个足够大的画布，有一个感兴趣的中心区域，周围的缓冲区域足够大，可以容纳你可能画的任何形状，比如：

XXX  
XCX
XXX

你可以在这个大画布上画一次形状，然后只需将中心区域周围的每个区域X盲目地画到中心区域（然后清除这些区域以进行下一次绘制）。因此，如果K是形状的数量，而不是4*K绘制，则有K+8个绘制（然后8个清除）。显然，这一点的实际适用性取决于形状和重叠问题的数量，尽管我敢打赌它可能会被调整。根据形状的复杂性，按照最初的想法绘制4次形状可能是有意义的，或者绘制到某个缓冲区或缓冲区，然后绘制4次像素数据或其他什么。我承认，这是我突然想到的一些想法，所以我可能错过了什么。

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

相关文章：