lineToで描画するときに「ブレーク」する

Question

これは初めてのJavascriptでCanvasで作業しています。私はかなり線を描こうとしています。ここで私はいくつかの行に入っています（下の画像）。時々、ラインは正しいように見えますが、ほとんどの場合、このようになります。あなたが見ることができるように、それは暗く見えるラインで少し休憩があります。私はこれの原因を理解しようとしていますが、運はありません。

ここに私のコードです。

var canvas = document.getElementById("canvas"); 
var Point = function(x, y) { 
    this.startX = x; 
    this.startY = y; 
}; 
var Interval = function(x, y) { 
    this.jumpX = x; 
    this.jumpY = y; 
}; 


var points = [ 
    [ 
     new Point(340, 130), // point start 
     new Point(220, 130), // end first line 
     new Point(220, 70), // end second line 
     new Interval(-10, -10), 
    ], 
    [ 
     new Point(560, 80), // point start 
     new Point(660, 80), // end first line 
     new Point(660, 20), // end second line 
     new Interval(10, -10), 
    ], 
    [ 
     new Point(620, 230), // point start 
     new Point(770, 230), // end first line 
     new Point(770, 150), // end second line 
     new Interval(10, -10), 
    ], 
    [ 
     new Point(620, 230), // point start 
     new Point(770, 230), // end first line 
     new Point(770, 150), // end second line 
     new Interval(10, -10), 
    ], 
]; 

var ctx = canvas.getContext('2d'); 
    ctx.strokeStyle = "#DFC270"; 

var func = function(points, text, j1, j2) { 
    var startX = points[0].startX, 
     startY = points[0].startY, 
     tempX = startX, 
     tempY = startY, 
     line1X = points[1].startX, 
     line1Y = points[1].startY, 
     line2X = points[2].startX, 
     line2Y = points[2].startY; 
    ctx.lineWidth = 1; 
    ctx.beginPath(); 
    var inter = function() { 
     ctx.moveTo(startX, startY); 

     // console.log(tempY + j1); 
     if (tempY == line1Y && tempX == line1X) { 

      if (startX !== line2X) { 
       startX += j2; 
      } 

      if (startY !== line2Y) { 
       startY += j2; 
      } 

      if (startY == line2Y && startX == line2X) { 
       ctx.beginPath(); 
       ctx.lineWidth = 1; 
       ctx.arc(startX, startY-j2, 5, 0, 2*Math.PI); 
       ctx.fillStyle = "#DFC270"; 
       ctx.fill(); 
       ctx.closePath(); 
       ctx.stroke(); 
       clearInterval(inter); 
       return; 
      } 

     } else { 
      if (startX !== line1X && tempX !== line1X) { 
       startX += j1; 
       tempX = startX; 
      } 

      if (startY !== line1Y && tempY !== line1Y) { 
       startY += j1; 
       tempY = startY; 
      } 
     } 
     window.requestAnimationFrame(inter); 
     ctx.lineTo(startX, startY); 
     ctx.stroke(); 
    }; 
    window.requestAnimationFrame(inter); 
}; 

for (var i = 0; i < points.length; ++i) { 
    var interval = points[i][points[i].length-1]; 
    func(points[i], 'test', interval.jumpX, interval.jumpY); 
}; 

ここで私はそれを再作成することができましたフィドルだあまりに

https://jsfiddle.net/e9vLoken/

Answer 1

のようなストローク機能で、下の余分なメソッド呼び出しを削除し、あなたのif文：

var func = function(points, text, j1, j2) { 
    ... 
    ctx.beginPath(); // <-- Already called here 
    ... 
    var inter = function() { 
     if (startY == line2Y && startX == line2X) { 
      //ctx.beginPath(); <-- Remove this 
      ctx.lineWidth = 1; 
      ... 

Answer 2

トラブルは、あなたがたときに、最終的なパスのストロークを完了したことがないということである：それはまだ開発中だように、それは非常にきれいではありません円が描画されるポイント。

ライン68コールこれは二回beginPath()を呼び出すことによるものである。この

if (startY == line2Y && startX == line2X) { 
     ctx.stroke(); 
     ctx.beginPath(); 
     ctx.lineWidth = 1; 
     ctx.arc(startX, startY-j2, 5, 0, 2*Math.PI); 
     ctx.fillStyle = "#DFC270"; 
     ctx.fill(); 
     ctx.closePath(); 
     ctx.stroke(); 
     clearInterval(inter); 
     return;