Jvascript Canvas - Draw Line not drawing

Question

У меня проблемы с Javascript-игрой, которую я пишу. У меня есть HTML-холст, на котором я рисую Javascript.

Я пытаюсь воссоздать аэропорт, поэтому я нарисовал некоторые взлетно-посадочные полосы (прямоугольники), а также нарисовал путевую точку (также прямоугольник), которая составляет x количество пикселей от конца прибытия взлетно-посадочной полосы. Я хочу нарисовать линию, соединяющую ВПП и путевую точку.

Мой код для этого приведен ниже. Обратите внимание, что мои ВПП хранятся в массиве из Runway объектов, где topLeft - верхний левый угол ВПП с величиной x и y, wayPointTopLeft - верхний левый угол связанной путевой точки, также с величиной x и y, wayPointWidthHeight - это ширина/высота моей прямоугольной формы путевой точки (которая рисуется как квадрат).

for (i = 0; i < aRunways.length; i++) { 
     // Runway 
     ctx.fillStyle = clone(colourBrightGreen); 
     ctx.lineWidth=1; 
     ctx.rect(aRunways[i].topLeft.x,aRunways[i].topLeft.y,aRunways[i].width,aRunways[i].height); 
     ctx.fill(); 

     // Waypoint 
     if(aRunways[i].name == "25") { 
      console.log(aRunways[i].topLeft.y + (aRunways[i].height/2)); 
      console.log(aRunways[i].wayPointTopLeft.y + (aRunways[i].wayPointWidthHeight/2)); 
     } 

     ctx.rect(aRunways[i].wayPointTopLeft.x, aRunways[i].wayPointTopLeft.y, aRunways[i].wayPointWidthHeight, aRunways[i].wayPointWidthHeight); 
     ctx.strokeStyle = colourBrightGreen; 
     ctx.lineWidth=4; 
     ctx.stroke(); 

     // Name 
     var textX = 0; 
     var textY = 0; 

     ctx.font = "12px Arial";   
     textX = aRunways[i].wayPointTopLeft.x + (aRunways[i].wayPointWidthHeight/2) - (getTextWidth(aRunways[i].name, ctx.font)/2); 
     textY = (aRunways[i].wayPointTopLeft.y + aRunways[i].wayPointWidthHeight + 17); 
     ctx.fillStyle = clone(colourBrightGreen); 

     ctx.fillText(aRunways[i].name, textX, textY); 

     // Line 
     ctx.lineWidth = 1; 
     ctx.fillStyle = clone(colourBrightGreen); 
     ctx.beginPath(); 
     ctx.moveTo((aRunways[i].topLeft.x + (aRunways[i].width/2)), (aRunways[i].topLeft.y + (aRunways[i].height/2))); 
     ctx.lineTo((aRunways[i].wayPointTopLeft.x + (aRunways[i].wayPointWidthHeight/2)), (aRunways[i].wayPointTopLeft.y + (aRunways[i].wayPointWidthHeight/2))); 
     ctx.closePath(); 
     ctx.fill(); 
    } 

Это прекрасно работает для вертикально ориентированных ВПП, но у меня есть горизонтальная взлетно-посадочная полоса, и линия не тянется. Это то, что рисуется:

Вы заметите, что у меня есть код для проверки, является ли имя ВПП 25. Это моя горизонтальная взлетно-посадочная полоса. Значения, выводимые в консоли для двух значений y, которые я тестирую, составляют 292,5, что имеет смысл, они должны совпадать с горизонтальной линией. Если я изменю эти строки журнала консоли, чтобы вывести связанные значения x, я получаю 313 для значения x взлетно-посадочной полосы и 395.5 для путевой точки. Опять же, это правильно.

Почему я не могу провести линию от (313, 292,5) до (395,5, 292,5)?

Answer 1

Для вашей последней строки, используйте .stroke() вместо .closePath() и .fill()

Он выглядит здесь, как вы создаете вырожденное пустое поле, а затем просить, чтобы он был заполнен, когда вы должны быть просто рисуете линия.