Démo des événements de souris et de clavier HTML5 Canvas example_html5 compétences du didacticiel

Présente les événements de souris HTML5 Canvas, obtient les coordonnées de la souris sur l'objet Canvas et présente les événements de clavier pour contrôler le mouvement des objets sur le Canvas via le clavier.

L'objet Canvas prend en charge tous les événements de souris JavaScript, y compris le clic de souris (MouseClick), la pression de la souris (Mouse Down), le soulèvement de la souris (Mouse Up), le déplacement de la souris (Mouse Move). Ajouter des événements de souris au Canvas. de deux manières, l'une consiste à le compléter via l'API :

Copiez le code

Le code est le suivant :

// événement de souris
canvas.addEventListener("mousedown",doMouseDown,false);
canvas.addEventListener('mousemove', doMouseMove,false); 'mouseup ', doMouseUp, false);
Une autre méthode est appelée anti-modèle en JavaScript :

Copier le codeLe code est le suivant :

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

Récupérer les coordonnées de la souris sur l'objet Canvas :
Depuis les coordonnées de la souris sur le Canvas ne peut pas être obtenu directement dans l'événement souris sur le Canvas, donc ce qui est obtenu est basé sur les coordonnées de l'ensemble de l'écran
. Par conséquent, la position de la souris est obtenue via les événements de souris e.pageX et e.pageY, puis la position relative de l'objet Canvas par rapport à l'écran est obtenue via
Canvas.getBoundingClientRect(), et les coordonnées de la souris dans le Canvas sont obtenus en calculant

, le code est le suivant :

Copier le code Le le code est le suivant :

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


Événements de clavier :

HTML5 Canvas lui-même ne prend pas en charge la surveillance et l'acquisition des événements de clavier. Il existe deux méthodes couramment utilisées pour résoudre ce problème :

1 : Implémenter la surveillance et le traitement des événements de clavier Canvas via des objets Windows
// événement clé - utiliser window comme objet
window.addEventListener('keydown', doKeyDown, true);

Deux : implémentez la prise en charge des événements de clavier en ajoutant d'autres éléments DOM qui prennent en charge les événements de clavier sur l'objet Canvas

Copier le codeLe code est le suivant :

// événement clé - utiliser l'élément DOM comme objet
canvas.addEventListener('keydown', doKeyDown,true); 🎜>

où tabindex est un élément HTML5 DOM et prend en charge les événements de clavier.
Démo, un bloc rectangulaire qui peut se déplacer vers le haut, le bas, la gauche et la droite en fonction du clavier :

Un code complet de démonstration d'événement souris et clavier est le suivant :




Copier le code

Le code est le suivant :

var tempContext = null; // variable globale contexte 2d
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("Canvas non pris en charge. Veuillez installer un navigateur compatible HTML5.");
retour ;
}
// récupère le contexte 2D du canevas et dessine un rectangle
tempContext = canvas.getContext("2d");
tempContext.fillStyle="bleu";
x = toile.width/2;
y = toile.hauteur/2;
tempContext.fillRect(x, y, 80, 40);
// événement clé - utiliser l'élément DOM comme objet
canvas.addEventListener('keydown', doKeyDown, true);
canvas.focus();
// événement clé - utiliser window comme objet
window.addEventListener('keydown', doKeyDown, true);
// événement souris
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) { // flèche vers le haut et W
clearCanvas();
y = y - 10 ;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 39 || keyID === 68) { // flèche droite et D
clearCanvas();
x = x 10 ;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 40 || keyID === 83) { // flèche vers le bas et S
clearCanvas();
y = y 10 ;
tempContext.fillRect(x, y, 80, 40);
e.preventDefault();
}
if(keyID === 37 || keyID === 65) { // flèche gauche et 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 = événement.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
console.log("mouse down at point( x:" loc.x ", y:" loc.y ")");
tempContext.beginPath();
tempContext.moveTo(loc.x, loc.y);
commencé = vrai ;
}
function doMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
if (démarré) {
tempContext.lineTo(loc.x, loc.y);
tempContext.Stroke();
}
}
function doMouseUp(event) {
console.log("mouse up now");
if (démarré) {
doMouseMove(event);
démarré = faux ;
}
}

HTML部分：

复制代码

代码如下 :

Démo d'événement HTML Canvas - Par Gloomy Fish

Appuyez sur les touches W, A, S, D pour déplacer