Question

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

我在下面的片段中留下了一些额外的代码，在那里我画了一条线到剪裁图像应该出现的点，但无论我做什么都没有。

编辑：可能值得注意的是，即使我没有尝试剪辑图像，此代码仍然无法正常工作。我根本无法让图像显示出来。

＆＃13;

$(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();
});

＆＃13;

<!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>

＆＃13;

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/

HTML5 Canvas DrawImage不绘制图像

1 个答案: