Javascript 我如何在html5中重新绘制一个圆，同时保持前一个圆路径的可见性

我正在尝试使用javascript和HTML5绘制一个扩展和收缩的循环。问题是（使用下面的代码）当路径被重新绘制时，当前路径仍然可见，只是变得更胖。有人知道为什么会这样吗

 function drawOuterInfoCircle(){
     var number = 25;
     var increase = true;

     function draw(){
         if(increase==true){
             number++
             //alert('increase');
             if(number==30){
                 increase=false
                 }
             }           
         if(increase==false){
             number--;
             //alert('decrease');
             if(number==25){
                 increase=true
             }
         }               
         var drawingCanvas = document.getElementById('canvas_circle');
         var drawingContext1 = drawingCanvas.getContext('2d');
         drawingContext1.strokeStyle = "#990000";
         drawingContext1.lineWidth = 12;
         drawingContext1.beginPath();
         drawingContext1.arc(100, 100, number, 0, Math.PI*2, true);
         drawingContext1.closePath();
         drawingContext1.stroke();       
     }
     setInterval(draw,100);      
 }

我试着用下面的（3088229篇文章）tna来清理画布

---

要用不透明度0填充的

请尝试

rgba（0,0,0,1）

在每次绘制戒指之前，擦除旧画布并在其上重新绘制

function draw(){


    var drawingCanvas = document.getElementById('canvas_circle');
    var drawingContext1 = drawingCanvas.getContext('2d');
    drawingContext1.clearRect(0,0,drawingCanvas_width,drawingCanvas_height);


     if(increase==true){
         number++
         //alert('increase');
         if(number==30){
             increase=false
             }
         }           
     if(increase==false){
         number--;
         //alert('decrease');
         if(number==25){
             increase=true
         }
     }               
     //var drawingCanvas = document.getElementById('canvas_circle');
     //var drawingContext1 = drawingCanvas.getContext('2d');
     drawingContext1.strokeStyle = "#990000";
     drawingContext1.lineWidth = 12;
     drawingContext1.beginPath();
     drawingContext1.arc(100, 100, number, 0, Math.PI*2, true);
     drawingContext1.closePath();
     drawingContext1.stroke();       
 }

---

谢谢-如果我把颜色也设置成白色也会有帮助：）让我羞愧地垂下头来。正如Steve所评论的，SVG可能更适合您的目的。还可以看看像D3.js这样的库，它使SVG动画变得轻而易举。您可能会发现使用HTML5 SVG是一个更好的选择。为什么呢。它是否消除了重新填充相同区域的需要？顺便说一句，我将检查它，而不是绘制位图，擦除画布并重新绘制，您可以创建一个SVG对象，然后更改其属性，它将重新显示自己。

function draw(){


    var drawingCanvas = document.getElementById('canvas_circle');
    var drawingContext1 = drawingCanvas.getContext('2d');
    drawingContext1.clearRect(0,0,drawingCanvas_width,drawingCanvas_height);


     if(increase==true){
         number++
         //alert('increase');
         if(number==30){
             increase=false
             }
         }           
     if(increase==false){
         number--;
         //alert('decrease');
         if(number==25){
             increase=true
         }
     }               
     //var drawingCanvas = document.getElementById('canvas_circle');
     //var drawingContext1 = drawingCanvas.getContext('2d');
     drawingContext1.strokeStyle = "#990000";
     drawingContext1.lineWidth = 12;
     drawingContext1.beginPath();
     drawingContext1.arc(100, 100, number, 0, Math.PI*2, true);
     drawingContext1.closePath();
     drawingContext1.stroke();       
 }