2

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

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

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

编辑

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

4

2 回答 2

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

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

于 2012-08-02T04:32:03.073 回答
1

您总是可以在画布中创建您的可耕作图像，生成一个 toDataUrl()，然后将该数据 url 作为背景分配给某物，然后让 CSS 进行平铺……只是一个想法。

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

var myImageData = context.getImageData(left, top, width, height); 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 次或其他内容可能是有意义的。我承认，这是我脑海中突然出现的一些想法，所以我可能会遗漏一些东西。

Edit III: And really, you could be smart about it. If you know how a set of objects are going to overlap, you should only have to draw from the buffer once. Say you got a bunch of shapes in a row that only draw to the north overlapping region. All you should need to do is draw those shapes, and then draw the north overlapping region to the south side. The hairy regions would be the corners, but I don't think they really get hairy unless the shapes are large.... sigh.. at this point I probably need to quiet down and see if there's any existing implementations of what I speak out there because I'm not sure my writing off-the-cuff is helping anybody.

于 2012-08-02T16:00:51.287 回答