Javascript 음수 매개 변수가있는 Canvas에서 Scale (x, y) 메서드가 작동하지 않습니다.

Question

scale() 메서드를 사용하여 이미지를 뒤집으려고합니다. 이 코드를 가지고 :

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

ctx.drawImage(Img, 0, 0, 100, 100); 

ctx.restore(); 

내가 규모 매개 변수로 1, 1을 넣어

, 또는 다른 어떤 실수, 스케일 기능은 잘 작동합니다. 그러나 -1과 같은 음수 매개 변수를 설정하면 (이미지를 수평으로 뒤집기 위해) 이미지가 전혀 그려지지 않습니다. 이 코드는 12fps setInterval 함수에 있습니다. 나는 어디에서나 보았지만 해결책을 찾을 수없는 것 같습니다. 어떤 도움이나 제안을 주시면 감사하겠습니다. 감사!

Answer 1

은 markE로 말한 것과 같이 캔버스 크기를 조절하거나 회전하거나 변형 할 때마다 사용중인 좌표가 캔바스 변환의 변화에 ​​반응합니다 (캔버스에서 이미지를 보내는 경우). 장소의 이미지를 반전하려면 첫 번째 매개 변수로 이미지의 폭과 번역의 사용을 고려해야합니다 :

ctx.save(); 
 

 
//The scale will flip the whole canvas, and will move the image 
 
//to the left (by the image width size) 
 
ctx.scale(-1, 1); 
 

 
//Using translate to move the image back to it's original origin 
 
ctx.translate(Img.width, 0) 
 

 
ctx.drawImage(Img, 0, 0, 100, 100); 
 

 
ctx.restore();

ctx.restore();