Warum Kontext Strich die alte Zeichnung auf Leinwand neu gezeichnet

Question

Mit dem folgenden Beispiel, wo auf einer Leinwand zwei verschiedene Linien gezeichnet werden, wenn Sie zwei Tasten drücken, wie kann ich die zweite Schaltfläche die alte Linie löschen und eine andere zeichnen?

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas> 

<button onclick="draw()">first</button> 

<button onclick="draw2()">second</button> 

<script> 

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 

ctx.strokeStyle = "red"; 

function draw(){ 
ctx.moveTo(0,0); 
ctx.lineTo(100,200); 
ctx.stroke(); 
} 

function draw2(){ 
ctx.clearRect(0, 0, c.width, c.height); 
ctx.moveTo(100,0); 
ctx.lineTo(0,200); 
ctx.stroke(); 
} 

</script> 

Ich verwende clearRect Funktion, die Leinwand zu löschen, aber wenn Schlaganfall auf der zweiten Zeichnung genannt wird, die erste ist neu gezeichnet.

Answer 1

Sie müssen .beginPath() aufrufen, um den aktuellen Pfad zu löschen und einen neuen Pfad zu erstellen. In Ihrem Fall sieht es so aus, als könnten Sie das zu Beginn jeder Ihrer beiden Funktionen tun.