Javascript Canvas - 描画線が描画されない

Question

私が書いているJavascriptのゲームに問題があります。私はJavascriptで描画しているHTMLキャンバスを持っています。

私は空港を再現しようとしていますので、滑走路（矩形）を描きました。また、滑走路の到着端からピクセル数が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であるかどうかを確認するコードがあります。これは私の水平滑走路です。私がテストしている2つのy値についてコンソールに出力された値は292.5であり、どちらも水平線と同じに見えるはずです。これらのコンソールログ行を変更して関連するx値を出力すると、滑走路のx値は313、ウェイポイントは395.5になります。繰り返しますが、これは正しいです。

なぜ私は（313,292.5）から（395.5,292.5）に線を引くことができないのですか？あなたの最後の行のために

Answer 1

、あなただけ描画する必要があるときに、縮退空のボックスを作成し、それを充填するために求めているようですが、ここから見える代わりに.closePath()と.fill()

の.stroke()を使用ライン。