javascript - 前の円のパスの可視性を保持してhtml5で円を再描画するにはどうすればよいですか

Question

javascript と html 5 を使用してパルスする拡大縮小リングを描画しようとしています。問題は (以下のコードを使用して) パスが再描画されると、現在のパスが表示されたままになり、太くなるだけです。なぜこれができるのか誰にも分かりますか？

 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

drawingContext1.fillStyle = 'rgba(0,0,0,0)';    
drawingContext1.fill();

フィドル_

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

Answer 2

不透明度0で塗りつぶしています。試してくださいrgba(0,0,0,1)