HTML 캔버스 수평 플립은 매 초 클릭 만 작동합니다.

Question

사진이있는 캔버스 요소가 있습니다. 링크를 클릭하면, 다음이 수행된다 :

var ctx = canvas.getContext("2d"); 
ctx.scale(-1,1); 
ctx.drawImage(canvas, canvas.width * -1, 0, canvas.width, canvas.height); 

이 제 클릭 제가 클릭 등 제 클릭 다섯째 클릭, 넷째 상 (이미지가 뒤집혀 가로) 예상대로 작동 클릭, 여섯 번째 클릭 등, 아무 일도 일어나지 않습니다.

모든 클릭에 대해이 방법을 사용할 수있는 방법에 대한 아이디어가 있으십니까?

Answer 1

그래, 이미지를 그린 후에 캔버스 배율을 1,1로 복원하지 않기 때문에 기본적으로 처음으로 이벤트를 호출 할 때 캔버스 배율이 -1,1로 바뀝니다. 다음에 1,1이 될 것이지만 항상 -1,1이 될 필요가 있습니다. 캔버스에서 이미지를 그리는 것이지 이미지 요소가 아닌 이미지를 그리는 것이므로 매번 플립해야합니다.

스케일링 전에 ctx.save()을 사용하고 이미지를 그린 후에 ctx.restore()을 사용해보십시오. 또는 이미지를 그린 후 ctx.scale(-1, 1)으로 다시 전화하십시오. 또는 캔버스가이 용도로만 사용되는 경우 이벤트 외부에서 크기 조정을 수행 할 수 있습니다 (처음 캔버스에 이미지를 그린 후).

Answer 2

여기이 모든 클릭에 대해 작동합니다

http://jsfiddle.net/4kcjn/2/

어떤이와 당신 사이에 다른, 자신에게 물어?

이미지로드와 관련 될 수 있습니다. 이미지없이 시도하십시오. 그것은 여전히 ​​같은 문제가 있습니까?