用線條畫線時會出現「斷線」

這是我第一次使用Javascript中的畫布工作。我試圖畫線，幾乎。以下是我在某些行中獲得的內容（下圖）。有時候這條線看起來是正確的，但大部分時間都是這樣。正如你所看到的那樣，在看起來較暗的線上有一點休息。我試圖找出這個原因，但沒有運氣。用線條畫線時會出現「斷線」

這是我的代碼。因爲它仍然在發展這不是很乾淨：

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/

來源

2016-05-13 avoliva

沒有問題的，但'clearInterval（inter）;'沒有做任何事情。 – nnnnnn

是的我以前使用的時間間隔，並切換到使用'requestAnimationFrame'。代碼仍在開發中。 – avoliva

我認爲問題的至少一部分是底部的'for'循環。你開始對'func（）'進行四次單獨的調用，然後每個調用都使用'requestAnimationFrame（）'開始它自己的異步過程，所以你有四個動畫同時使用同一個'ctx'變量。 – nnnnnn

這是由於調用beginPath()兩次，去除下多餘的方法調用你的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; 
      ...

來源

2016-05-13 23:27:58

麻煩的是，你永遠不會完成最終路徑行程時指出要繪製圓的地方。

在第68行調用行程功能這樣

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;

來源

2016-05-13 23:17:39

是的，這沒有做任何事情。 – avoliva

用線條畫線時會出現「斷線」

回答

相關問題