Demobeispiel für HTML5 Canvas-Maus- und Tastaturereignisse. HTML5-Tutorial-Kenntnisse-H5-Tutorial-php.cn

Demobeispiel für HTML5 Canvas-Maus- und Tastaturereignisse. HTML5-Tutorial-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:49:25

Original

1433 Leute haben es durchsucht

Demonstriert HTML5-Canvas-Mausereignisse, ruft Mauskoordinaten für das Canvas-Objekt ab und demonstriert Tastaturereignisse, um die Bewegung von Objekten auf dem Canvas über die Tastatur zu steuern.

Das Canvas-Objekt unterstützt alle JavaScript-Mausereignisse, einschließlich Mausklick (MouseClick), Mausdrücken (Mouse Down), Mausheben (Mouse Up) und Mausbewegung (Mouse Move). Es gibt zwei Möglichkeiten, eine Möglichkeit besteht darin, es über die API zu vervollständigen:

Kopieren Sie den Code

Der Code lautet wie folgt:

// Mausereignis
canvas.addEventListener("mousedown",doMouseDown,false);
canvas.addEventListener('mousemove', doMouseMove,false); 'mouseup ', doMouseUp, false);
Eine andere Möglichkeit wird in JavaScript als Anti-Muster bezeichnet:

Code kopierenDer Code lautet wie folgt:

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

Erhalten Sie die Koordinaten der Maus auf dem Canvas-Objekt:
Da die Koordinaten der Maus auf dem Canvas kann nicht direkt im Mausereignis auf der Leinwand abgerufen werden. Der Abruf basiert daher auf den Koordinaten des gesamten
-Bildschirms. Daher wird die Mausposition über die Mausereignisse e.pageX und e.pageY ermittelt, und dann wird die relative Position des Canvas-Objekts relativ zum Bildschirm über
Canvas.getBoundingClientRect() und die Koordinaten der Maus ermittelt im Canvas werden durch Berechnen von

erhalten, der Code lautet wie folgt:

Code kopieren Der Der Code lautet wie folgt:

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)
}

Tastaturereignisse:

HTML5 Canvas selbst unterstützt keine Überwachung und Erfassung von Tastaturereignissen. Es gibt zwei häufig verwendete Methoden, um dieses Problem zu lösen:

1: Implementieren Sie die Überwachung und Verarbeitung von Canvas-Tastaturereignissen über Windows-Objekte
//. Tastenereignis – Fenster als Objekt verwenden
window.addEventListener('keydown', doKeyDown, true);

Zweitens: Implementieren Sie Tastaturereignisunterstützung, indem Sie andere DOM-Elemente hinzufügen, die Tastaturereignisse auf dem Canvas-Objekt unterstützen

Code kopierenDer Code lautet wie folgt:

Demobeispiel für HTML5 Canvas-Maus- und Tastaturereignisse. HTML5-Tutorial-Kenntnisse

HTML Canvas Event Demo – Von Gloomy Fish