HTML5畫布DrawImage沒有繪製圖像

Question

我有一點點的綁定 - 我試圖通過剪裁單個圖像以僅顯示實際圖像的一小部分的方式在屏幕上繪製一個精靈。然而，沒有出現，我在我的代碼中沒有收到任何錯誤。任何想法可能是錯誤的？

我在下面的代碼片段中留下了一些額外的代碼，我在其中繪製了一條線，指向剪輯圖像應該顯示的點，但是無論我做什麼，都沒有任何內容。

編輯：可能值得注意的是，即使我不試圖剪輯圖像，此代碼仍然不起作用。我根本無法讓圖像顯示出來。

的jsfiddle：http://jsfiddle.net/m7y406z8/

$(function() { 
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    var window_width = window.innerWidth; 
 
    var window_height = window.innerHeight; 
 

 
    var Player = function(x, y, spriteset, direction, elevation, animationframe, action) { 
 
    this.x = x; 
 
    this.y = y; 
 
    this.spriteset = new Image(); 
 
    this.spriteset.src = spriteset; 
 
    this.direction = direction; 
 
    this.elevation = elevation; 
 
    this.animationframe = animationframe; 
 
    this.action = action; 
 

 
    a_imageAssets.push(this.spriteset); 
 
    } 
 

 
    var a_imageAssets = []; 
 

 
    var peasant = new Player(window_width/2, window_height/2, "http://tchwi.com/player/sprites/peasant.png", "s", 0, 0, 0); 
 

 
    switch (peasant.animationframe) { 
 
    case 0: //if first frame of animation is selected then this is the sprite sheet 
 
     peasant.standingCells = [{ 
 
      top: 0, 
 
      right: 25, 
 
      bottom: 29, 
 
      left: 0 
 
     }, //n 
 
     { 
 
      top: 0, 
 
      right: 47, 
 
      bottom: 29, 
 
      left: 25 
 
     }, //nw 
 
     { 
 
      top: 0, 
 
      right: 69, 
 
      bottom: 29, 
 
      left: 47 
 
     }, //w 
 
     { 
 
      top: 0, 
 
      right: 91, 
 
      bottom: 29, 
 
      left: 69 
 
     }, //sw 
 
     { 
 
      top: 0, 
 
      right: 116, 
 
      bottom: 29, 
 
      left: 91 
 
     }, //s 
 
     { 
 
      top: 0, 
 
      right: 138, 
 
      bottom: 29, 
 
      left: 116 
 
     }, //se 
 
     { 
 
      top: 0, 
 
      right: 160, 
 
      bottom: 29, 
 
      left: 138 
 
     }, //e 
 
     { 
 
      top: 0, 
 
      right: 182, 
 
      bottom: 29, 
 
      left: 160 
 
     } //ne 
 
     ]; 
 
    } 
 

 
    var drawCharacter = function(character) { 
 
    drawCells = {}; //object to inject the current cell into 
 
    switch (character.action) { 
 
     case 0: //if character is standing still 
 
     (character.direction = "n" ? drawCells = character.standingCells[0] : ''); 
 
     (character.direction = "nw" ? drawCells = character.standingCells[1] : ''); 
 
     (character.direction = "w" ? drawCells = character.standingCells[2] : ''); 
 
     (character.direction = "sw" ? drawCells = character.standingCells[3] : ''); 
 
     (character.direction = "s" ? drawCells = character.standingCells[4] : ''); 
 
     (character.direction = "se" ? drawCells = character.standingCells[5] : ''); 
 
     (character.direction = "e" ? drawCells = character.standingCells[6] : ''); 
 
     (character.direction = "ne" ? drawCells = character.standingCells[7] : ''); 
 
     break; 
 
    } 
 

 
    var dx = character.x + (drawCells.right - drawCells.left)/2; 
 
    var dy = character.y + (drawCells.bottom - drawCells.top)/2; 
 
    var dWidth = drawCells.right - drawCells.left; 
 
    var dHeight = drawCells.bottom - drawCells.top; 
 
    var sx = drawCells.left; 
 
    var sy = drawCells.top; 
 
    var sWidth = drawCells.right - drawCells.left; 
 
    var sHeight = drawCells.bottom - drawCells.top; 
 
    ctx.drawImage(character.spriteset, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight); 
 
    console.log(character.spriteset); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(0, 0); 
 
    ctx.lineTo(dx, dy); 
 
    ctx.stroke(); 
 
    ctx.strokeStyle = 'black'; 
 
    console.log(dx + ", " + dy); 
 
    }; 
 

 
    var drawBackground = function() { 
 
    ctx.fillStyle = 'red'; 
 
    ctx.fillRect(0, 0, window_width, window_height); 
 
    }; 
 

 
    var renderCanvas = function() { 
 
    ctx.clearRect(0, 0, window_width, window_height); 
 
    drawBackground(); 
 
    drawCharacter(peasant); 
 
    console.log('huh'); 
 
    }; 
 

 
    var canvasSizing = function() { 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight; 
 
    } 
 

 
    canvasSizing(); 
 
    renderCanvas(); 
 
});

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="main.css" /> 
 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
    <script type="text/javascript" src="main.js"></script> 
 
</head> 
 

 
<body> 
 
    <canvas id="canvas" width="100%" height="100%"></canvas> 
 
</body> 
 

 
</html>

Answer 1

您是帶着參數爲了混淆。這裏是an actual one from MDN：

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

這裏是你的代碼的差異：

// You have:    You need: 
ctx.drawImage(    ctx.drawImage(
    character.spriteset,  character.spriteset, 
    dx,       sx, 
    dy,       sy, 
    dWidth,      sWidth, 
    dHeight,     sHeight, 
    sx,       dx, 
    sy,       dy, 
    sWidth,      dWidth, 
    sHeight      dHeight 
);       ); 

這裏是一個更新的jsfiddle：http://jsfiddle.net/m7y406z8/1/