Gibt es irgendeine Möglichkeit das zu beschleunigen das mousemove-Ereignis?

Schrieb ich ein wenig zeichnen-Skript (canvas) für diese website: http://scri.ch/

Wenn Sie auf das Dokument, jede mousemove Veranstaltung grundsätzlich führt die folgenden Schritte aus:

- Holen Sie sich Koordinaten.

- context.lineTo() zwischen diesem Punkt und dem vorherigen

- context.stroke() die Linie

Wie Sie sehen können, wenn Sie bewegen Sie den cursor sehr schnell, wird das Ereignis nicht auslösen genug (je nach CPU /Browser /etc.), und eine gerade Linie verfolgt.

In pseudocode:

window.addEventListener('mousemove', function(e){
  myContext.lineTo(e.pageX, e.pageY);
  myContext.stroke();
}, false);

Dies ist ein bekanntes problem und die Lösung ist gut, aber ich möchte zu optimieren, dass.

Also statt stroke() jedes mal, wenn ein mousemove-Ereignis ausgelöst wird, habe ich die neuen Koordinaten in ein array-Warteschlange, und regelmäßig ziehen /leer es mit einem timer.

In pseudocode:

var coordsQueue = [];

window.addEventListener('mousemove', function(e){
  coordsQueue.push([e.pageX, e.pageY]);
}, false);

function drawLoop(){
  window.setTimeout(function(){
    var coords;
    while (coords = coordsQueue.shift()) {
      myContext.lineTo(coords[0], coords[1]);
    }
    myContext.stroke();
    drawLoop();
  }, 1000); //For testing purposes
}

Aber es besserte sich nicht die Linie. So habe ich versucht, nur zeichnen Sie einen Punkt auf mousemove. Gleichen Ergebnis: zu viel Platz zwischen den Punkten.

Es machte mir klar, dass der erste code-block ist effizient genug, es ist nur die mousemove Ereignis auslösen zu langsam.

So, nachdem ich mich einige Zeit damit verbracht zu implementieren, die eine nutzlose Optimierung, it ' s your turn: gibt es eine Möglichkeit zur Optimierung der mousemove auslösen Geschwindigkeit in DOM-scripting?

Ist es möglich, zu "verlangen" die Maus-position zu jeder Zeit?

Danke für Eure Ratschläge!