奇怪的线出现在画布上

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>