Event -Hörer auf Leinwand in HTML5 -Ausgabe

Question

Ich bin neu in HTML5, ich möchte einen Ereignishörer auf meiner Maus erstellen. Ich habe den folgenden Code geschrieben, aber ich kann Y nicht verstehen, ich kann den Event -Hörer in meinem Canvas -Element nicht erstellen, freundlicherweise Hilfe

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

In Anbetracht eines Ans möchte ich mir den Ereignis -Listener -Code auch geben, vielleicht hat er auch einen Fehler

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

}

Answer 1

Sie möchten das Ereignis zu Ihrer Leinwand hinzufügen, nicht den 2D -Kontext:

canvas_simple.addEventListener('mousemove', ev_mousemove, false);

Hier ist eine Demo: Jsfiddle Link

Answer 2

Es gibt ein paar Fehler:

• Sie können den Hörer nicht an den Kontext anhängen. Die Hörer können nur an einen einzigen Knoten in einem Dokument, das Dokument selbst, ein Fenster oder ein XMLHTTPrequest angeschlossen werden. Sie sollten es also an das Canvas -Element anhängen.

• Sie können Leinwand nicht nisten

• Die Immobilie von Canvasheight ist nicht definiert

Ich habe ein JSFIDDLE mit Ihrem Beispiel geändert und funktioniert -> hier