javascript - HTML5 Canvas DrawImage不绘制图像

我遇到了一些困难 - 我试图通过剪切单个图像来在屏幕上绘制 Sprite ，以仅显示实际图像的一小部分。但是，什么也没有出现，并且我的代码中没有收到任何错误。关于可能出现问题的任何想法？

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

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

$(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>

最佳答案

您对参数顺序感到困惑。这是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/

关于javascript - HTML5 Canvas DrawImage不绘制图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46995558/

javascript - HTML5 Canvas DrawImage不绘制图像

上一篇：javascript - 引入多个代码参数

下一篇：javascript - 使用 jQuery 获取要显示的复选框和文本区域的文本