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

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, 키보드에 따라 상하좌우로 움직일 수 있는 직사각형 블록:

전체 마우스 및 키보드 이벤트 데모 코드는 다음과 같습니다.

코드 복사코드는 다음과 같습니다.

var tempContext = null; // 전역 변수 2d context
var start = false;
var mText_canvas = null;
var x = 0, y =0;
window.add
window.onload = function() {
var canvas = document.getElementById("event_canvas");
console.log(canvas.parentNode.clientWidth);
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log("캔버스는 지원되지 않습니다. HTML5 호환 브라우저를 설치하세요.");
반환;
}
// 캔버스의 2D 컨텍스트를 가져오고 직사각형을 그립니다.
tempContext = canvas.getContext("2d");
tempContext.fillStyle="파란색";
x = 캔버스.폭/2;
y = 캔버스.높이/2;
tempContext.fillRect(x, y, 80, 40);
// 키 이벤트 - DOM 요소를 객체로 사용
canvas.addEventListener('keydown', doKeyDown, true);
canvas.focus();
// 키 이벤트 - 창을 객체로 사용
window.addEventListener('keydown', doKeyDown, true);
// 마우스 이벤트
canvas.addEventListener("mousedown", doMouseDown, false);
canvas.addEventListener('mousemove', doMouseMove, false);
canvas.addEventListener('mouseup', doMouseUp, false);
}
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)
};
}
function doKeyDown(e) {
var keyID = e.keyCode ? e.keyCode :e.which;
if(keyID === 38 || keyID === 87) { // 위쪽 화살표 및 W
clearCanvas();
y = y - 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 39 || keyID === 68) { // 오른쪽 화살표 및 D
clearCanvas();
x = x 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 40 || keyID === 83) { // 아래쪽 화살표 및 S
clearCanvas();
y = y 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 37 || keyID === 65) { // 왼쪽 화살표 및 A
clearCanvas();
x = x - 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
}
function clearCanvas() {
tempContext.clearRect(0, 0, 500, 500)
}
function doMouseDown(event) {
var x = 이벤트.페이지X;
var y = event.pageY;
var 캔버스 = event.target;
var loc = getPointOnCanvas(canvas, x, y);
console.log("지점( x:" loc.x ", y:" loc.y ")")에서 마우스를 아래로 놓습니다.
tempContext.beginPath();
tempContext.moveTo(loc.x, loc.y);
시작 = 사실;
}
function doMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
var 캔버스 = event.target;
var loc = getPointOnCanvas(canvas, x, y);
if (시작됨) {
tempContext.lineTo(loc.x, loc.y);
tempContext.스트로크();
}
}
function doMouseUp(event) {
console.log("지금 마우스를 올리세요");
if (시작됨) {
doMouseMove(event);
시작 = 거짓;
}
}

HTML부분:

复主代码

代码如下:

HTML 캔버스 이벤트 데모 - 작성자: Gloomy Fish

W, A, S, D 키를 눌러 이동