HTML5 Canvas DrawImage 不绘制图像答案

【问题标题】：HTML5 Canvas DrawImage not drawing imageHTML5 Canvas DrawImage 不绘制图像
【发布时间】：2017-10-28 23:42:03
【问题描述】：

我有点纠结 - 我试图通过剪裁单个图像以仅显示实际图像的一小部分来在屏幕上绘制精灵。但是，什么都没有出现，我的代码中也没有收到任何错误。关于可能出错的任何想法？

我在下面的 sn-p 中留下了一些额外的代码，在那里我画了一条线到应该显示剪切图像的位置，但是无论我做什么，那里什么都没有。

编辑：值得注意的是，即使我不尝试剪辑图像，此代码仍然不起作用。我根本无法显示图像。

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>

【问题讨论】：

标签： javascript jquery html canvas

【解决方案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/

【讨论】：

哦该死的。这是一个愚蠢的错误......但似乎仍然不起作用？