Как правильно нарисовать много линий разной ширины на холсте 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/

Скорее всего, проблема возникает при вычисленииширина линии.Вам также может понадобиться вызвать closePath () в некоторых браузерах.

Попробуйте упростить свой пример и опубликовать рабочий код, чтобы мы могли увидеть, в чем проблема.