2013-12-14 155 views
1

在當下畫布繪製15個不同速度和大小的圈子從ltr移動。當他們中的一個離開窗口時,它將被設置爲開始。問題是帆布畫圈之間的線,我不知道爲什麼?任何人都可以幫忙嗎?爲什麼畫布在圓弧(圓弧)之間畫線?

window.onload = function() { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var W = canvas.width = window.innerWidth; 
    var H = canvas.height = window.innerHeight; 
    var mp = 15; //max particles 
    var particles = []; 
    //var rotate = 180; 

    reqAnimFrame = window.requestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.msRequestAnimationFrame  || 
        window.oRequestAnimationFrame; 

    for (var i = 0; i < mp; i++) 
     { 
      particles.push({ 
       x: Math.floor(Math.random()*W), //x-coordinate 
       y: Math.floor(Math.random()*H), //y-coordinate 
       d: Math.floor(Math.random()*(mp - 1) + 1), //density 
       r: Math.floor(Math.random()*(70 - 10) + 10) //radius 
      }) 
     } 



    function animate() { 
     reqAnimFrame(animate); 
     for (var i = 0; i < mp; i++) 
      { 
       var p = particles[i]; 
       p.x += p.d; 


       if(p.x >= W){ 
        p.x = -300; 
        p.y = Math.floor(Math.random()*H); 
       } 
       draw(); 
      } 
    } 

    function draw() { 
     ctx.clearRect(0, 0, W, H); 
     ctx.fillStyle = "rgba(0,204,142,1"; 
     ctx.beginPath(); 
     for (var i = 0; i < mp; i++) 
      { 
       var p = particles[i]; 
       ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, false); 
       //ctx.moveTo(p.x,p.y); 
       //ctx.lineTo(p.x + 150, p.y + (-180)); 
       //ctx.lineTo(p.x + 300, p.y); 
      } 
     ctx.stroke(); 
    } 
    animate(); 
    };//onload function 

回答

6

改變代碼一點點beginPath()stroke()現在只被調用一次 - 什麼情況是,該弧在循環累積的,因爲他們不是真正的圓 - 他們有兩個開口端 - 這些目標將相互連接,在弧線之間創建線條。

嘗試以下操作:

function draw() { 
    ctx.clearRect(0, 0, W, H); 
    ctx.fillStyle = "rgba(0,204,142,1"; 
    for (var i = 0; i < mp; i++) { 
     var p = particles[i]; 
     ctx.beginPath(); 
     ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, false); 
     ctx.stroke(); 
    } 
}