javascript - 如何重新开始 Canvas 绘制？

Question

当我点击开始时，我得到了整个圆圈。但是，当我单击清理并再次开始时，先前的部分圆剩余并出现直线。

演示: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>