如何在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（）。

尝试简化您的示例并发布工作代码，以便我们可以看到问题出在哪里。