Html5 Canvas 예비 연구 노트(15) - 마우스 이벤트

주인공이 마우스로 움직이는 예시를 완성한 글입니다.

업데이트 기능은 이전 글과 동일하며 코드는 다음과 같습니다.

그러면 init의 초기화 부분을 보시면 코드는 다음과 같습니다.

그런 다음 mousedown, mousemove 및 mouseup 각각 마우스 누르기, 움직이기, 올리기에 해당합니다. 코드는 다음과 같습니다.

먼저 다음 코드를 사용하여 좌표를 구합니다. 다양한 브라우저에서 사용:

var mx,my;
if(ev.layerX || ev.layerX==0){
mx = ev.layerX;
my = ev.layerY;
}else if(ev.offsetX || ev.offsetX==0){
mx = ev.offsetX;
my = ev.offsetY;
}

그런 다음 마우스 좌표가 그림 범위 내에 있는지 확인하고 범위 내에 있으면 좌표 오프셋을 가져옵니다.

mousedown이 이미지 범위 내에 있는 경우 이동에서 이미지 좌표를 다시 구하고, 함수 해제 시 해제한 후 캔버스에 함수를 등록하면 이 예제가 완성됩니다/

위 내용은 Html5 Canvas Preliminary Study Notes(15) - Mouse Events 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요. !