奇怪的線出現在畫布上

Question

我想動畫出現在使用弧方法在我的畫布中的曲線出現的許多圓圈，出現一個奇怪的切線，並不應該是這樣，因爲我沒有包含任何代碼該行只出現在圓圈中。有人可以向我解釋爲什麼這行出現？這裏是所有的代碼

window.requestAnimFrame = (function() { 
 
     /* window.requestAnimationFrame  || 
 
      window.webkitRequestAnimationFrame || 
 
      window.mozRequestAnimationFrame || 
 
      window.oRequestAnimationFrame  || 
 
      window.msRequestAnimationFrame  || */ 
 
    return function(callback) { 
 
    window.setTimeout(callback, 1000); 
 
    }; 
 
})(); 
 
var graph = { 
 
    x: 0, 
 
    y: 0, 
 
    incur: 0.6, 
 
    canvas: document.getElementsByTagName('canvas')[0], 
 
    ctx: null, 
 
    ratio: 640/1136, 
 
    init: function() { 
 
    graph.ctx = graph.canvas.getContext('2d'); 
 

 

 
    graph.resize(); 
 

 
    }, 
 
    resize: function() { 
 
    graph.canvas.height = window.innerHeight; 
 
    graph.canvas.width = graph.ratio * window.innerHeight; 
 
    console.log("asd") 
 

 

 
    }, 
 
    loop: function() { 
 
    graph.incur += 0.6 
 
    window.requestAnimFrame(graph.loop); 
 
    console.log(graph.incur) 
 
    graph.x += graph.incur 
 
    graph.y += graph.incur * graph.incur 
 

 
    //graph.draw.clear(); 
 
    graph.draw.circle(graph.x, graph.y, 10, "#FF0000") 
 

 
    } 
 

 

 
} 
 
graph.draw = { 
 
    clear: function() { 
 
    graph.ctx.clearRect(0, 0, graph.canvas.width, graph.canvas.height) 
 
    }, 
 

 
    circle: function(x, y, r, col) { 
 
    graph.ctx.fillStyle = col; 
 
    graph.ctx.arc(x, y, r, 0, Math.PI * 2, true) 
 
    graph.ctx.fill(); 
 
    } 
 

 

 

 
} 
 
graph.init(); 
 
window.addEventListener("resize", graph.resize); 
 
graph.loop();

canvas { 
 
    display: block; 
 
    margin: 0 auto; 
 
    background-color: #808080; 
 
}

<canvas> 
 
</canvas>

這裏是一個怪異線的截屏的鏈接：

weird line

Answer 1

該生產線出現，因爲arc方法將移動開始的路徑x/y座標 - 通過這樣繪製一條線，然後繪製圓。在繪製圓之前，您可以通過調用moveTo輕鬆避免此行爲。

演示：

window.requestAnimFrame = (function(){ 
 
return function(callback){ 
 
    window.setTimeout(callback, 1000); 
 
    } 
 
})() 
 

 
var graph = { 
 
    x: 0, 
 
    y: 0, 
 
    incur: 0.6, 
 
    canvas: document.querySelector('canvas'), 
 
    ctx: null, 
 
    ratio: 640/1136, 
 

 
    init(){ 
 
     graph.ctx = graph.canvas.getContext('2d'); 
 
     graph.resize(); 
 
    }, 
 

 
    resize(){ 
 
     graph.canvas.height = window.innerHeight; 
 
     graph.canvas.width = graph.ratio * window.innerHeight; 
 
    }, 
 

 
    loop(){ 
 
     graph.incur += 0.6 
 
     window.requestAnimFrame(graph.loop) 
 
     graph.x += graph.incur 
 
     graph.y += graph.incur ** 2 
 
     graph.draw.circle(graph.x,graph.y,10,"#FF0000") 
 
    }, 
 

 
    draw: { 
 
     circle(x, y, r, color) { 
 
      graph.ctx.fillStyle = color 
 
      graph.ctx.moveTo(x + arc.radius, y) 
 
      graph.ctx.arc(x, y, r, 0, Math.PI * 2) 
 
      graph.ctx.fill() 
 
     } 
 
    } 
 
} 
 

 
graph.init(); 
 
window.addEventListener("resize", graph.resize); 
 
graph.loop();

canvas { 
 
    display: block; 
 
    margin: 0 auto; 
 
    background-color: #808080; 
 
}

<canvas></canvas>