Question

我一直在努力解决这个问题一小时了。由于某种原因，图像不是在画布上绘制的。我在绘制方法之前调用update方法。

所以有推动动画obj：

function AttackAnimation(target, caller, type){
    this.img = testImage;
    this.img.src = "img/slash_008.png";
    this.x = (target.x + caller.x) / 2;
    this.y = (target.y + caller.y) / 2;
    this.angle = Math.atan2(target.y-caller.y,target.x-caller.x) + Math.PI/2;
    this.animStart = frameTime;
    this.animationSpeed = 90;
    this.spriteSize = 3;
    this.update = function(){
      this.animationFrame = Math.floor((frameTime - this.animStart) / this.animationSpeed);
      if(this.animationFrame > this.spriteSize) delete missiles[this.id];
    }
    this.draw = function(ctx){
      ctx.drawRotatedImagePlus(this.img, this.animationFrame*25, 0, 25, 16, this.x, this.y, 25, 16, this.angle);
      // ctx.drawImage(this.img, this.animationFrame*25, 0, 25, 16, this.x * gh, this.y*gh, gh, gh);
    }
  }

这是旋转的动画绘图：

CanvasRenderingContext2D.prototype.drawRotatedImagePlus = function(image, partX, partY, w, h, x, y, angle) {
    this.save(); 
    this.translate(x, y);
    this.rotate(angle);
    this.drawImage(image, partX, partY, w, h, -w/2, -h/2, w, h);
    this.restore();
}

所以问题当然是“我是盲人吗？”这不够吗？提前感谢任何提示。

Answer 1

你可以尝试添加一个指向此的自变量，然后在draw函数内部调用self.img，问题可能是这个内部绘制函数的范围。

function AttackAnimation(target, caller, type){
var self = this;
self.img = testImage;
self.img.src = "img/slash_008.png";
self.x = (target.x + caller.x) / 2;
self.y = (target.y + caller.y) / 2;
self.angle = Math.atan2(target.y-caller.y,target.x-caller.x) + Math.PI/2;
self.animStart = frameTime;
self.animationSpeed = 90;
self.spriteSize = 3;
self.update = function(){
  self.animationFrame = Math.floor((frameTime - self.animStart) / self.animationSpeed);
  if(self.animationFrame > self.spriteSize) delete missiles[self.id];
}
self.draw = function(ctx){
  ctx.drawRotatedImagePlus(self.img, self.animationFrame*25, 0, 25, 16, self.x, self.y, 25, 16, self.angle);
  // ctx.drawImage(self.img, self.animationFrame*25, 0, 25, 16, self.x * gh, self.y*gh, gh, gh);
}

}

JS drawImage旋转图像

1 个答案: