コンテキストストロークがキャンバス上の古い図面を再描画する理由

Question

キャンバス上で2つのボタンを押したときに2つの異なる線が描画される次の例があると、2番目のボタンで古い線をクリアし、

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

私はキャンバスをクリアするために、clearRect機能を使用していますが、ストロークが第二の描画に呼び出されたときに、最初のものは再描画されます。

Answer 1

現在のパスをクリアして新しいパスを開始するには、.beginPath()に電話する必要があります。あなたの場合は、あなたの2つの機能のそれぞれの初めにそれを行うことができるように見えます。