javascript - 从一个纹理文件中获取单独的纹理

Question

我正在使用 Canvas 元素在 Javascript 中使用 jQuery 制作基于 2D 瓷砖的计算机游戏。我有一个在一个文件中有多个纹理的图像文件，如下图所示：

比如我知道每个纹理的宽度是，那50 px我有什么办法呢蓝色是 2，黄色是 3)，是画布的 2D 上下文。drawTexture(id, canvas)idcanvas

Answer 1

使用 中的切片功能drawImage。

<img id="source" src="myTileSheet.png" style="display:none"/>

var columns    = 2,   //  The amount of tile columns,
    tileWidth  = 50,  //  Tile width,
    tileHeight = 50,  //  Tile height.
    image      = document.getElementById('source'),
    canvas     = document.getElementById('myCanvas'),
    ctx        = canvas.getContext('2d');

function drawTileAt(number, targetX, targetY){
    var sx = tileWidth * (Math.floor(number / columns)); // Get the X position.
    var sy = tileHeight * (number % columns);            // Y.

    // Where you want it on the canvas.
    ctx.drawImage(image,                  // Source image,
                  sx, sy,                 // Source X / Y to get the tile from,
                  tileWidth, tileHeight,  // Source Width / Height to crop out,
                  targetX, targetY,       // Destination X / Y to place the image,
                  tileWidth, tileHeight); // Destination W / H (can be used to scale a tile)
}

但是，这假设number从 0 开始计数。如果您希望您的第一个图块被编号1，请在函数的第一行添加：

number--;

所以：

function drawTile(number){
    number--;
    var image = document.getElementById('source');
    // etc.