如何重新开始画布绘图？

Question

当我点击开始时，我会得到整个圈子。但是当我点击 clean 并再次开始时，之前剩下的部分圆圈出现了直线。

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

＆＃13;

＆＃13;

 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);
   
 });

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>