JS drawImage旋轉圖像

Question

我一直試圖找出一個小時現在。 由於某種原因，圖像只是沒有畫在畫布上。 我在繪製方法之前調用更新方法。

所以動畫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); 
} 

}