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

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:

// key event - DOM-Element als Objekt verwenden
canvas.addEventListener('keydown', doKeyDown,true); 🎜>

wobei tabindex ein HTML5-DOM-Element ist und Tastaturereignisse unterstützt.
Demo, ein rechteckiger Block, der sich je nach Tastatur nach oben, unten, links und rechts bewegen kann:

Ein vollständiger Demonstrationscode für Maus- und Tastaturereignisse lautet wie folgt:




Code kopieren

Der Code lautet wie folgt:

var tempContext = null; // globale Variable 2D-Kontext
var gestartet = 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("Canvas wird nicht unterstützt. Bitte installieren Sie einen HTML5-kompatiblen Browser.");
zurück;
}
// 2D-Kontext der Leinwand abrufen und Rechteck zeichnen
tempContext = canvas.getContext("2d");
tempContext.fillStyle="blue";
x = canvas.width/2;
y = canvas.height/2;
tempContext.fillRect(x, y, 80, 40);
// Schlüsselereignis – DOM-Element als Objekt verwenden
canvas.addEventListener('keydown', doKeyDown, true);
canvas.focus();
// Tastenereignis – Fenster als Objekt verwenden
window.addEventListener('keydown', doKeyDown, true);
// Mausereignis
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) { // Aufwärtspfeil und W
clearCanvas();
y = y - 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 39 || keyID === 68) { // Rechtspfeil und D
clearCanvas();
x = x 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 40 || keyID === 83) { // Pfeil nach unten und S
clearCanvas();
y = y 10;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 37 || keyID === 65) { // Pfeil nach links und 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 = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
console.log("Maus nach unten am Punkt( x:" loc.x ", y:" loc.y ")");
tempContext.beginPath();
tempContext.moveTo(loc.x, loc.y);
started = true;
}
function doMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
if (gestartet) {
tempContext.lineTo(loc.x, loc.y);
tempContext.Stroke();
}
}
function doMouseUp(event) {
console.log("mouse up now");
if (gestartet) {
doMouseMove(event);
started = false;
}
}

HTML部分：

复制代码

代码如下:

HTML Canvas Event Demo – Von Gloomy Fish

Drücken Sie die Tasten W, A, S, D, um zu bewegen