HTML5 Canvas DrawImage nicht Zeichnung Bild

Question

Ich habe ein bisschen eine Bindung - Ich versuche, ein Sprite auf dem Bildschirm zu zeichnen, indem Sie ein einzelnes Bild auf eine Weise abschneiden, um nur einen kleinen Teil des eigentlichen Bildes anzuzeigen. Nichts erscheint jedoch und ich erhalte keine Fehler in meinem Code. Irgendwelche Ideen, was falsch sein könnte?

Ich habe einen kleinen zusätzlichen Code in dem Ausschnitt unten, wo ich eine Linie zu dem Punkt, wo das abgeschnittene Bild angezeigt werden soll, aber es gibt nichts da, egal was ich tue.

Edit: Es kann erwähnenswert sein, dass dieser Code noch nicht funktioniert, auch wenn ich nicht versuchen, das Bild zu schneiden. Ich kann das Bild einfach nicht sehen.

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

Sie mit Argumenten, um verwirrt war. Hier ist an actual one from MDN:

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

Hier ist ein Unterschied im Code:

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

Hier ist eine aktualisierte JSFiddle: http://jsfiddle.net/m7y406z8/1/