Wie kann ich die Zeichenfläche so löschen, dass immer eine Linie zwischen (0,0) und meinen Mauskoordinaten angezeigt wird?

Question

Ich beginne HTML-Canvas-Element zu erforschen, indem ein einfaches Zeichenprogramm erstellen:

• Wenn ich meine Maus auf der Leinwand bewegen, mag ich eine Linie zwischen (0,0) und den Maus-Koordinaten gezeichnet werden. Ich möchte immer nur eine Zeile rendern.
• Um sicherzustellen, dass nur eine Zeile angezeigt wird, lösche ich bei der Mausbewegung den Kontext und zeichne eine neue Linie von (0,0) bis zur Maus (x, y).
• Das obige ist nicht das gleiche wie "Freiform" oder "Bleistift" Zeichenwerkzeug, sondern eine grobe Form der "Linie" Werkzeug.

Im Inneren der Maus bewegen Event-Handler, ich dies zuerst tun:

context.clearRect(0, 0, canvas.width, canvas.height); 

und dann dies tun:

context.moveTo(0, 0); 
context.lineTo(mousePos.x, mousePos.y); 
context.stroke(); 

Das Problem ist, wird die Leinwand nicht das Clearing und alle zuvor Linien gezeichnet werden noch gezeigt.

Der vollständige Code ist hier: https://jsfiddle.net/csenthiltech/7ozsnhoy/

Ich habe versucht, Online-Quellcode einfache Zeichenprogramme durchlaufen und fanden sie auch einen ähnlichen Ansatz verfolgt wird. Aber ich kann es nicht funktionieren. Hier sind einige Fragen, die ich zu diesem Thema ging durch:

• Draw on HTML5 Canvas using a mouse
• How do I hand draw on canvas with JavaScript?

Was bin ich hier?

Answer 1

fand ich eine Antwort here

Der Grund dafür ist, dass, wenn Sie rufen context.beginPath nicht() & context.closePath(), Schlaganfall() alle zuvor gespeicherten Befehle ziehen wird.

context.beginPath(); 
context.moveTo(0, 0); 
context.lineTo(mousePos.x, mousePos.y); 
context.clearRect(0, 0, canvas.width, canvas.height); 
context.stroke(); 

Jsfiddle here