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です：いまいましいああhttp://jsfiddle.net/m7y406z8/1/