HTML5 Обрезанное изображение холста не отображается - PullRequest
Новая
       19

HTML5 Обрезанное изображение холста не отображается

1 голос
/ 31 октября 2011

Я изучаю HTML5 и JavaScript и пытаюсь нарисовать анимированное изображение. Я подумал, что самый простой способ сделать это - создать изображение с кадрами в строке, как показано ниже.

Изображение http://html5stuff.x10.mx/HTML5%20Test/alien_green_strip8.png

Тогда единственная часть изображения будет рисоваться одновременно. Я следовал этому учебнику.

Это ссылка на то, что я сделал:

html5stuff.x10.mx / HTML5% 20Test / page.html

Проблема в том, что изображение не рисуется. Это что-то внутри функции drawSprite, потому что, когда я изменяю ее на простое «ctx.drawImage (sprite.source, x, y)», оно действительно рисует изображение (очевидно, как целое без анимации). Обратите внимание, что хотя есть возможность поворота изображения, я еще не добавил эту поддержку. Кроме того, keys.js еще не используется, хотя и включен.

1 Ответ

0 голосов
/ 31 октября 2011

Причина в том, что sprite.imagenum не определяется при вызове drawSprite.

Это потому, что в некоторых местах вы используете imagenum, а в других imgnum, поэтому исправьте эту опечатку, и вы 'все хорошо!

ПОЛНОСТЬЮ ОПЦИОНАЛЬНО:

Но теперь, когда это так, давайте посмотрим на ваши js, чтобы лучше понять, как это структурировать.У вас есть: 

function Sprite(){
  var imagenum = null; //The number of images
  var width = null; //The width of each image
  var height = null; //The height on each image
  var xoffset = null; //The origin on each image
  var yoffset = null;
  var source = null; //The location of each image
}

function drawSprite(sprite, subimg, x, y, w, h, angle){
  ctx.drawImage(sprite.source, Math.floor(subimg) * sprite.width, 0, w * sprite.imagenum, h, x - sprite.xoffset * (w/sprite.width), y - sprite.yoffset * (h/sprite.height), w, h);
}

Все эти операторы var фактически ничего не делают.Это должно быть: 

function Sprite(){
  this.imagenum = null; //The number of images
  this.width = null; //The width of each image
  this.height = null; //The height on each image
  this.xoffset = null; //The origin on each image
  this.yoffset = null;
  this.source = null; //The location of each image
}

, чтобы правильно установить их так, как вы предполагали.Кроме того, вы можете переписать drawSprite так, чтобы спрайты рисовали сами, чтобы вам не нужно было передавать их в качестве аргумента: 

// now we can use "this" instead of "sprite"
Spite.prototype.draw = function(subimg, x, y, w, h, angle){
    // put this on several lines just so we can see it easier
    ctx.drawImage(this.source,
      Math.floor(subimg) * this.width,
      0,
      w * this.imagenum, h,
      x - this.xoffset * (w/this.width),
      y - this.yoffset * (h/this.height),
      w, h);
    }

Тогда вместо: 

drawSprite(img, index, 128, 128, 32, 32, 0); // img is a sprite

Мы можем написать: 

img.draw(index, 128, 128, 32, 32, 0); // img is a sprite
...