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

您正在填充不透明度 0，请尝试rgba(0,0,0,1)

Answer 2

在每个环形绘图之前擦除旧画布并在其上重新绘制，

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