캔버스 그리기를 다시 시작하는 방법은 무엇입니까?

Question

시작을 클릭하면 전체 원형을 얻습니다. 그러나 을 클릭하고을 다시 시작하면 이전에 원의 일부가 남아 있고 직선이 나타납니다.

DEMO는 : https://fiddle.jshell.net/1xhkfk73/

var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var draw = 0; 
 
var stepDraw = 0; 
 
ctx.strokeStyle = "#FF0000"; 
 
ctx.translate(0.5, 0.5); 
 
var delay = 30; 
 
var drawing = 0; 
 

 
function drawCircle(steps) { 
 
    draw = ((2 * Math.PI)/steps); 
 
    stepDraw = draw; 
 

 
    drawing = setInterval(function() { 
 

 
    ctx.arc(400, 200, 120, draw, draw, false); 
 
    ctx.stroke(); 
 
    draw += stepDraw; 
 
    }, delay) 
 
} 
 

 

 
$("#click").click(function() { 
 
    drawCircle(120); 
 
}); 
 

 
$("#clean").click(function() { 
 
    clearInterval(drawing); 
 
    ctx.clearRect(0, 0, 800, 400); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="click">start</span> 
 
<span id="clean">clean</span> 
 
<canvas id="myCanvas" class="center-block" width="800" height="400"> 
 
    Canvas not supported! 
 
</canvas>

Answer 1

이보십시오.

경로가 닫혀 있어야합니다.

var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var draw = 0; 
 
var stepDraw = 0; 
 
ctx.strokeStyle = "#FF0000"; 
 
ctx.translate(0.5, 0.5); 
 
var delay = 30; 
 
var drawing = 0; 
 

 
function drawCircle(steps) { 
 
    draw = ((2 * Math.PI)/steps); 
 
    stepDraw = draw; 
 
    drawing = setInterval(function() { 
 
    ctx.beginPath(); 
 
    ctx.arc(400, 200, 120, draw, draw+stepDraw, false); 
 
    ctx.stroke(); 
 
    draw += stepDraw; 
 
    }, delay) 
 
} 
 

 

 
$("#click").click(function() { 
 
    drawCircle(120); 
 
}); 
 

 
$("#clean").click(function() { 
 
    clearInterval(drawing); 
 
    ctx.clearRect(0, 0, 800, 400); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="click">start</span> 
 
<span id="clean">clean</span> 
 
<canvas id="myCanvas" class="center-block" width="800" height="400"> 
 
    Canvas not supported! 
 
</canvas>