Javascript画布-绘制线不绘制

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值，我将得到跑道x值的313值和路径点的395.5值。同样，这是正确的。

为什么我不能画一条从(313,292.5)到(395.5,292.5)的线？

Answer 1

在最后一行中，使用.stroke()而不是.closePath()和.fill()

从这里看来，您正在创建一个退化的空框，然后要求填充它，而您应该只是画一条线。