Tôi đang sử dụng canvas để hiển thị một số họa tiết và tôi cần lật ngang một ảnh theo chiều ngang (do đó, nó quay sang trái hoặc sang phải). Tuy nhiên, tôi không thể thấy bất kỳ phương pháp nào để thực hiện điều đó với drawImage
.Lật một ảnh trong vải
Đây là mã có liên quan của tôi:
this.idleSprite = new Image();
this.idleSprite.src = "/game/images/idleSprite.png";
this.idleSprite.frameWidth = 28;
this.idleSprite.frameHeight = 40;
this.idleSprite.frames = 12;
this.idleSprite.frameCount = 0;
this.draw = function() {
if(this.state == "idle") {
c.drawImage(this.idleSprite, this.idleSprite.frameWidth * this.idleSprite.frameCount, 0, this.idleSprite.frameWidth, this.idleSprite.frameHeight, this.xpos, this.ypos, this.idleSprite.frameWidth, this.idleSprite.frameHeight);
if(this.idleSprite.frameCount < this.idleSprite.frames - 1) { this.idleSprite.frameCount++; } else { this.idleSprite.frameCount = 0; }
} else if(this.state == "running") {
c.drawImage(this.runningSprite, this.runningSprite.frameWidth * this.runningSprite.frameCount, 0, this.runningSprite.frameWidth, this.runningSprite.frameHeight, this.xpos, this.ypos, this.runningSprite.frameWidth, this.runningSprite.frameHeight);
if(this.runningSprite.frameCount < this.runningSprite.frames - 1) { this.runningSprite.frameCount++; } else { this.runningSprite.frameCount = 0; }
}
}
Như bạn thấy, tôi đang sử dụng phương pháp drawImage
để vẽ sprite của tôi để canvas. Cách duy nhất để lật một sprite mà tôi có thể thấy là lật/xoay toàn bộ khung hình, đó không phải là thứ tôi muốn làm.
Có cách nào để làm điều đó không? Hoặc tôi sẽ cần phải tạo một sprite mới phải đối mặt với cách khác và sử dụng nó?
Cảm ơn bạn! Nhưng do câu trả lời của Simon, tôi sẽ sử dụng kỹ thuật của anh ấy. Tôi sẽ đánh dấu bạn là câu trả lời được chấp nhận mặc dù nó trả lời câu hỏi của tôi :) –