drawImage로 만든 움직이는 이미지 캔버스

캔버스에서 이미지를 움직이면 어떨까요? + = 또는 - =로 변경할 수있는 x \ y 좌표가 없습니다.drawImage로 만든 움직이는 이미지 캔버스

2012-10-10 Meliborn

처음부터 어떻게 캔버스에 이미지를 얻고 있습니까? drawImage에 x/y 오프셋을 지정해야합니다. 그냥 바꾸세요. – TheZ

drawImage (my_image, x, y)로 이미지를 생성했습니다. 여기서 x와 y는 마우스 클릭 이벤트의 좌표입니다. – Meliborn

거기 가서 x와 y 값을 저장하고 증분 한 다음 다시 그립니다. – TheZ

캔버스는 이미 메이트 드로잉 표면입니다. drawImage과 같은 호출을하면 캔버스는 비트 맵을 컨텍스트로 렌더링 한 다음 아무 일도 일어나지 않았다는 것을 잊어 버립니다. 그것은 아무것도 추적합니다.

즉, 모든 것을 추적해야합니다. 움직이는 이미지를 원하면 캔버스를 지우고 이전과 다른 위치에서 이미지 (그리고 그 밖의 모든 것들)를 다시 그려야합니다.

이 내용은 다양한 방식으로 많이 나오므로 managing the state of drawn objects and canvas interactivity에 대한 자습서를 작성했습니다. 이 자습서에서는 화면 주위로 드래그 할 수있는 사각형을 사용하지만 이미지를 사용하는 방법은 거의 동일합니다.

출처

2012-10-11 03:24:53

링크가 작동하지 않음 : https://simonsarris.com/blog/510-making-html5-canvas-useful –

oops : https :// /simonsarris.com/making-html5-canvas-useful/ –

drawImage로 만든 움직이는 이미지 캔버스

답변

관련 문제