像我有 tileset 的东西:
0, 1, 2, 3, 4, 5,
6, 7, 8, 9, 10, 11,
12, 13, 14, 15, 16,
17, 18, 19, 20
我的 tileset 绘制代码:
var image = new Image();
image.src = '32x32.png';
var tile = 5;
var tileSize = 32;
var x = 100;
var y = 100;
context.drawImage(image, Math.floor(tile * tileSize), 0, tileSize, tileSize, x, y, tileSize, tileSize);
这段代码绘制“5” block ,但如何绘制 10 个 block ?或不添加 tileX、tileY 的 15 个图 block 。 我需要类似 if tile equal to 15 - draw 15 tile 的东西。
抱歉我的英语不好。
谢谢!
最佳答案
将这些倾斜坐标放入(多维)数组中,这样您就可以遍历数据并显示结果。这意味着如果有 10 个项目,您的代码将遍历所有 10 个项目。如果有 15 个,那么很好,它将遍历所有 15 个。
当然,如果您通过使用 for 循环并将结束条件指定为“i < tile”(假设您的计数从 0 开始)来循环遍历,您可以限制瓷砖的数量。
如果我不太理解您的意思,请告诉我。下面是我为我的项目创建的用于绘制图 block 的函数示例。它可能会为您提供一些线索,让您了解您正在尝试做什么。
function renderMap(ctx, mapObj)
{
var rgt = mapObj.data();
for (matrixY in rgt) {
for (matrixX in rgt[matrixY]) {
var matrixArray = rgt[matrixY][matrixX].split(',');
var x = matrixArray[0];
var y = matrixArray[1];
var sx = (x-1) * mapObj.tileWidth();
var sy = (y-1) * mapObj.tileHeight();
var dx = (matrixX) * mapObj.tileWidth();
var dy = (matrixY) * mapObj.tileHeight();
ctx.drawImage(mapObj.mapTilesImg(), sx, sy, mapObj.tileWidth(), mapObj.tileHeight(), dx, dy, mapObj.tileWidth(), mapObj.tileHeight());
}
}
}
以及使用的数据(跟踪对象的一部分):
rgt: [ ['1,7', '1,7', '1,7', '1,7', '1,7', '1,7', '1,7', '1,7'],
['1,2', '2,1', '4,4', '2,1', '2,4', '2,1', '2,1', '2,2'],
['3,4', '4,5', '1,7', '1,7', '4,13', '1,7', '1,7', '1,4'],
['4,3', '1,7', '3,7', '1,7', '1,7', '1,2', '2,1', '2,6'],
['1,1', '1,15', '1,7', '1,7', '2,7', '1,4', '1,7', '1,7'],
['1,6', '2,1', '2,1', '2,4', '4,1', '2,6', '1,7', '1,7']
]
我使用了坐标。例如。 '1,7' = 在我的 sprite 表上有 1 个,7 个在下。
关于javascript - HTML5 Canvas 绘制 tileset,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9646409/