Question

我正在学习HTML5和JavaScript，并试图绘制动画图像。我认为最简单的方法是创建一个连续帧的图像，如下所示。

Image http://html5stuff.x10.mx/HTML5%20Test/alien_green_strip8.png

然后，一次只能绘制一部分图像。我按照this教程。

这是我所做的链接：

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

问题是，图像没有被绘制。这是drawSprite函数中的内容，因为当我将其更改为简单的“ctx.drawImage（sprite.source，x，y）”时，它确实绘制了图像（显然，没有动画的整体）。请注意，虽然有旋转图像的选项，但我还没有添加支持。此外，虽然包含了keys.js，但还没有使用它。

Answer 1

原因是因为调用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

HTML5裁剪的画布图像不显示

1 个答案: