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

fiddle

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

如何保留html5中的圆圈并保留前一个圆圈路径的可见性

2 个答案: