Ich baue ein Tool mit Websockets, das es mehreren Benutzern erlaubt, auf den jeweiligen Leinwänden zu "zeichnen". Der Benutzer zeichnet auf einer Zeichenfläche, und ein Objekt, das mousedown / mouseup Ereignisse und Koordinaten enthält, wird sofort an andere Benutzer weitergegeben. Dies wird dann auf ihren Canvases geplottet, was dazu führt, dass mehrere Benutzer an derselben Stelle zeichnen.
Es funktioniert wie beschrieben: Sie können sehen, dass jemand etwas zeichnet, und dann etwas zeichnen, das in ihrer Leinwand erscheint. Das Problem tritt auf, wenn Sie im selben Moment zeichnen wie jemand anders.
Für jeden Benutzer wird ein neuer Kontext für die Arbeitsfläche jedes Benutzers erstellt:
%Vor%Wenn Sie im selben Moment wie ein anderer Benutzer zeichnen, zeichnen die Canvases wahnsinnig Linien zwischen Ihren und ihren Koordinaten, obwohl sie die verschiedenen Kontexte verwenden.
Warum ist das der Fall? Muss ich etwas anderes tun, um mehrere Zeilen gleichzeitig darzustellen? Ist es nicht möglich, auf diese Weise mehrere Kontexte zu erstellen?
Jede Hilfe wird sehr geschätzt.
Die HTML5 Canvas-Spezifikation sagt , für getContext() :
Wenn die Methode getContext () für dieses Element bereits aufgerufen wurde Für dieselbe contextId gebe das gleiche Objekt zurück, das zurückgegeben wurde Zeit, und brechen Sie diese Schritte ab. Die zusätzlichen Argumente werden ignoriert.
Sie haben keinen anderen Kontext für jeden Benutzer, es ist derselbe. Die letzte Pfadposition wird von jedem neuen Ereignis geändert, und ich nehme an, dass Sie beginPath und moveTo nicht verwenden, um den Pfad bei jedem neuen Ereignis zurückzusetzen. Versuchen Sie stattdessen Folgendes:
Tags und Links javascript html html5 canvas html5-canvas