如何在HTML5畫布上正確繪製多條不同寬度的線條？

Question

我正在研究一個程序，該程序應該在屏幕上繪製一個類似於思維導圖的對象網絡，然後繪製這些對象之間的連接。線的寬度應代表連接的強度。連接隨時間而改變，但許多連接繪製不正確。我100％肯定我確實改變了正確的聯繫，並且我只是畫得很糟糕。

所以，這裏是我如何繪製它，你能告訴我我做錯了什麼？我該如何做對？

for (o = 0; o < self.brain.objects.length; o++) 
     for (con = 0; con < self.brain.objects[o].connections.length; con++) 
     { 
      self.screen.lineWidth = Math.sqrt(self.brain.objects[o].connections[con].weight)*5*self.zoom; 

      self.screen.beginPath(); 
      self.screen.moveTo((self.brain.objects[o].rect[0] - self.globalPos[0])*self.zoom + (self.brain.objects[o].rect[2]/2)*self.zoom, (self.brain.objects[o].rect[1] - self.globalPos[1] + self.brain.objects[o].rect[3]/2)*self.zoom); 
      self.screen.lineTo((self.brain.objects[o].connections[con].to.rect[0] - self.globalPos[0] + self.brain.objects[o].connections[con].to.rect[2]/2)*self.zoom, (self.brain.objects[o].connections[con].to.rect[1] - self.globalPos[1] + self.brain.objects[o].connections[con].to.rect[3]/2)*self.zoom); 
      self.screen.stroke(); 
     } 

Answer 1

您有正確的代碼來繪製不同寬度的線。

這裏是一個的jsfiddle顯示在動作的代碼， http://jsfiddle.net/q9LRs/

的問題是可能的原因，當你計算你的lineWidth。您可能還需要在某些瀏覽器中調用closePath（）。

嘗試簡化您的示例併發布工作代碼，以便我們可以看到問題出在哪裏。