html5キャンバスにスプライトが表示されない

Question

私はタイルが現在fillRect関数を使用して色付きの長方形でレンダリングされているタイルベースのプラットフォームゲームを持っています。私は代わりに矩形をレンダリングするために使用したいスプライトシートを持っています。各タイルとスプライトは幅と高さがそれぞれ32ピクセルです。私は画像をトリミングするときにロード機能が必要だが、スプライトを1秒間に60フレーム作図して描画する必要があるため、どこに行かなければならないのかわからない。 HERESに私のJSフィドル - https://jsfiddle.net/LsLpyn8p/4/

または以下のコード：

 var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 

    var width = 6; 
    var height = 3; 
    var tileSize = 32; 

    var counter = 0; 
    var playerUp = false; 

    setInterval(gameLoop, 1000/30); 

    function gameLoop() { 
     ctx.fillStyle = "white"; 
     ctx.fillRect(0, 0, canvas.width, canvas.height); 

     for (var y = 0; y < height; y++) { 
      for (var x = 0; x < width; x++) { 
       posX = (x * tileSize) + 1 * x; 
       posY = (y * tileSize) + 1 * y; 

       //  ctx.fillStyle = "green"; 
       // ctx.fillRect(posX, posY, tileSize, tileSize); 
       var spriteSheet = new Image(); 
       spriteSheet.src = 'https://pasteboard.co/GMAwgYX.png'; 

       ctx.drawImage(spriteSheet, 0, 4 * tileSize, tileSize, tileSize, posX, posY, tileSize, tileSize); 
      } 
     } 

     ctx.fillStyle = "red"; 
     ctx.fillRect(50, counter, tileSize, tileSize); 

     if (playerUp == true) { 
      counter--; 
     } else { 
      counter++; 
     } 

     if (counter == 100) { 
      playerUp = true; 
     } else if (counter == 0) { 
      playerUp = false; 
     } 
    } 

すべてのヘルプがappricatedさのおかげ

Answer 1

私はあなたが画像の切り出したピースを配置しようとしていると仮定します。

あなたは、このケースでは、4×32 = 128

Xは、あなたのSourceImageの座標だ、4 * tileSizeを指していると、画像が小さすぎると、この多くのピクセルを持っていない128です。

例えば10でスタート、：

ctx.drawImage(spriteSheet, 0, 10, tileSize, tileSize, posX, posY, tileSize, tileSize); 

jsFiddle

Documentation

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 

sx 
The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context. 

sy 
The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.