如何在html5中重繪一個圓並保留前一個圓圈路徑的可見性

我正在繪製一個使用javascript和html 5進行脈衝展開和收縮的環。問題是（使用下面的代碼）路徑被重新繪製，當前路徑保持可見並且變得更加粗壯。任何人都知道爲什麼會這樣？如何在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

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

的fiddle

來源

2013-01-21 beaumondo

您可能會發現使用HTML5 SVG是一個更好的選擇。 –

斯蒂夫是誰？它是否消除了重新填充同一區域的需要？ BTW的歡呼聲 - 我會檢查它 – beaumondo

而不是繪製位圖，擦除畫布和重畫它，你可以創建一個SVG對象，然後改變它的屬性，它會重新顯示自己。 –

你不透明度0填充，儘量rgba(0,0,0,1)

來源

2013-01-21 13:32:15 paul

謝謝 - 這也將有所幫助，如果我把顏色設置爲白色也是:)現在掛掉我的頭羞愧 – beaumondo

NP。就像史蒂夫評論說的那樣，SVG可能更適合你的目的。另外看看像D3.js這樣的庫，它可以使SVG動畫變得輕而易舉。 – paul

清空畫布

每次環形繪圖前擦除舊的畫布並重新繪製，

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

來源

2013-01-21 19:25:55

如何在html5中重繪一個圓並保留前一個圓圈路徑的可見性

回答

相關問題