Event Listener su Canvas nel numero di HTML5
-
27-10-2019 - |
Domanda
Sono nuovo in HTML5, voglio creare un ascoltatore di eventi sul mio mouse, ho scritto il seguente codice, ma non riesco a capire Y, non posso creare l'ascoltatore di eventi sul mio elemento di tela, gentilmente aiuto
var canvasDiv = document.getElementById('canvas');
canvas_simple = document.createElement('canvas');
canvas_simple.setAttribute('height', canvasHeight);
canvas_simple.setAttribute('id', 'canvasSimple');
canvasDiv.appendChild(canvas_simple);
if(typeof G_vmlCanvasManager != 'undefined')
{
canvas_simple = G_vmlCanvasManager.initElement(canvas_simple);
}
context_simple = canvas_simple.getContext("2d");
context_simple.addEventListener('mousemove', ev_mousemove, false);
Alla luce di un ANS che voglio darmi anche il codice dell'ascoltatore, potrebbe essere anche un errore
var started = false;
function ev_mousemove (ev) {
var x, y;
if (ev.layerX || ev.layerX == 0) { // Firefox
x = ev.layerX;
y = ev.layerY;
}
else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
if (!started) {
context.beginPath();
context.moveTo(x, y);
started = true;
}
else {
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 10;
context.lineTo(x, y);
context.stroke();
}
}
Soluzione
Vuoi aggiungere l'evento alla tua tela, non il contesto 2D:
canvas_simple.addEventListener('mousemove', ev_mousemove, false);
Ecco una demo: Link JSFIDLE
Altri suggerimenti
Ci sono alcuni errori:
Non è possibile allegare l'ascoltatore al contesto, gli ascoltatori possono essere allegati solo a: un singolo nodo in un documento, il documento stesso, una finestra o un XMLHTTPREQUEST. Quindi dovresti attaccarlo all'elemento tela.
Non puoi nidificare la tela
La proprietà Canvasheight non è definita
Ho creato un jsfiddle con il tuo esempio modificato e funzionante -> qui