Lật một ảnh trong vải

Question

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.

Đâ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ó?

Answer 1

Bạn có thể chuyển đổi ngữ cảnh vẽ canvas mà không cần lật toàn bộ canvas.

c.save(); 
c.scale(-1, 1); 

sẽ phản ánh ngữ cảnh. Vẽ hình ảnh của bạn, sau đó

c.restore(); 

và bạn có thể vẽ lại bình thường. Để biết thêm thông tin, xem https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations

Answer 2

Trong khi Gaurav đã cho thấy cách kỹ thuật để lật một sprite in canvas ...

Đừng làm điều này cho trò chơi của bạn.

Thay vào đó, hãy tạo một hình ảnh thứ hai (hoặc làm cho hình ảnh hiện tại của bạn lớn hơn) là phiên bản lộn xộn của trang tính lớn. Sự khác biệt hiệu suất giữa "lật ngữ cảnh và vẽ hình ảnh" so với "chỉ vẽ một hình ảnh" có thể lớn. Trong Opera và Safari lật các kết quả canvas trong bản vẽ chậm hơn mười lần và trong Chrome, tốc độ này chậm gấp hai lần. Xem this jsPerf để biết ví dụ.

Tính toán trước các sprites được lật của bạn sẽ luôn nhanh hơn, và trong trò chơi hiệu suất canvas thực sự quan trọng.

Answer 3

Sử dụng tính năng này để lật trang tính của bạn http://flipapicture.com/