如何重新开始画布绘图？答案

【问题标题】：How to restart canvas drawing?如何重新开始画布绘图？
【发布时间】：2016-09-05 18:54:20
【问题描述】：

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

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

【问题讨论】：

ctx.beginPath()...
@Kaiido 非常感谢 :)

标签： javascript canvas html5-canvas

【解决方案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>

【讨论】：