HTML5 Canvas的环绕声：如何获取（静态）形状在画布的边缘周围继续 [英] Wraparound for HTML5 Canvas: How to Get (Static) Shapes to Continue around Edges of Canvas

问题描述

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

I'm trying to draw a tiled background using Javascript on an HTML5 canvas, but it's not working because shapes that intersect the edges of the canvas don't wrap around to the other side. (Just to be clear: these are static shapes--no motion in time is involved.) How can I get objects interrupted by one side of the canvas to wrap around to the other side?

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

Basically I'm looking for the "wraparound" effect that many video games use--most famously Asteroids; I just want that effect for a static purpose here. This page seems to be an example that shows it is possible. Note how an asteroid, say, on the right edge of the screen (whether moving or not) continues over to the left edge. Or for that matter, an object in the corner is split between all four corners. Again, no motion is necessarily involved.

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

Anyone have any clues how I might be able to draw, say, a square or a line that wraps around the edges? Is there perhaps some sort of option for canvas or Javascript? My google searches using obvious keywords have come up empty.

---

编辑

给予更多的背景，我的工作基于这里的例子： Canvas作为背景图像。 （也从这里链接：使用< canvas>作为CSS背景。）重复图像没问题。问题是将截断的形状部分包裹到另一边。

---

Edit

To give a little more context, I'm basing my work off the example here: Canvas as Background Image. (Also linked from here: Use <canvas> as a CSS background.) Repeating the image is no problem. The problem is getting the truncated parts of shapes to wrap around to the other side.

推荐答案

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

I'm not sure how you have the tiles set-up, however, if they are all part of a single 'wrapper' slide which has it's own x,x at say 0,0, then you could actually just draw it twice, or generate a new slide as needed. Hopefully this code will better illustrate the concept.

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

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

So basically, the idea here is to draw the groupings of tiles twice. Once in it's actual position, and again to fill in the gap. You still need to calculate when the entire group leaves the canvas completely, and then reset it, but hopefully this leads you in the correct direction!

这篇关于HTML5 Canvas的环绕声：如何获取（静态）形状在画布的边缘周围继续的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！