HTML5 Canvas 마우스 및 키보드 이벤트 데모 example_html5 튜토리얼 기술

WBOY

풀어 주다： 2016-05-16 15:49:25

원래의

1435명이 탐색했습니다.

HTML5 Canvas 마우스 이벤트를 보여주고, Canvas 개체에서 마우스 좌표를 가져오고, 키보드를 통해 Canvas에서 개체의 움직임을 제어하는 키보드 이벤트를 보여줍니다.

Canvas 개체는 마우스 클릭(MouseClick), 마우스 누름(Mouse Down), 마우스 리프트(Mouse Up), 마우스 이동(Mouse Move)을 포함한 모든 JavaScript 마우스 이벤트를 지원합니다. 두 가지 방법 중 하나는 API를 통해 완료하는 것입니다.

코드 복사

코드는 다음과 같습니다.

// 마우스 이벤트
canvas.addEventListener("mousedown",doMouseDown,false);
canvas.addEventListener('mousemove', doMouseMove,false)
canvas.addEventListener( 'mouseup', doMouseUp, false)
또 다른 방법은 JavaScript에서 안티 패턴이라고 합니다:

코드 복사

코드는 다음과 같습니다.

canvas.onmousedown = function(e){
}
canvas.onmouseup = function(e){
}
canvas.onmousemove = function(e){
}

캔버스 객체에서 마우스 좌표를 가져옵니다.
캔버스에서 마우스 좌표를 가져오므로 Canvas의 마우스 이벤트에서는 직접 얻을 수 없으므로,
화면 전체의 좌표를 기준으로 얻어지는 것입니다. 따라서 마우스 이벤트 e.pageX, e.pageY를 통해 마우스 위치를 구하고,
Canvas.getBoundingClientRect()를 통해 화면을 기준으로 한 Canvas 객체의 상대 위치를 구하고, 마우스 좌표를 구합니다. 캔버스에서

을 계산하여 얻은 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다:

function getPointOnCanvas(canvas, x, y) {
var bbox =canvas.getBoundingClientRect()
return { x: x- bbox.left *( canvas.width / bbox.width),
y:y - bbox.top * (canvas.height / bbox.height)
}
}

키보드 이벤트:
HTML5 Canvas 자체는 키보드 이벤트 모니터링 및 획득을 지원하지 않습니다. 이 문제를 해결하기 위해 일반적으로 사용되는 두 가지 방법이 있습니다.

1: Windows 개체를 통해 Canvas 키보드 이벤트 모니터링 및 처리 구현
// 키 이벤트 - 창을 객체로 사용
window.addEventListener('keydown', doKeyDown, true)

둘: Canvas 객체에 키보드 이벤트를 지원하는 다른 DOM 요소를 추가하여 키보드 이벤트 지원을 구현합니다.

코드 복사

코드는 다음과 같습니다.

// DOM 요소를 객체로 사용
canvas.addEventListener('keydown', doKeyDown,true)
canvas.focus(); 🎜>

여기서 tabindex는 HTML5 DOM 요소이며 키보드 이벤트를 지원합니다.
Demo, 키보드에 따라 상하좌우로 움직일 수 있는 직사각형 블록: