在Typescript中从For-Loop中绘制画布上的线条，不会呈现出

Question

我做一个图形工具是为了好玩，然后它变成了一个真正的项目... ...

我试图实现一个非常简单的图形... ...一个线图。

然而，在我的typescript项目里面使用for-loop却没有结果。

看看下面的源代码，你可以看到我有控制台日志，我需要确认一个动作正在发生。在我的typescript项目中，所有的日志都运行得很好，而且顺序也很完美。

由于SO不支持typescript，所以这里有一个带有typecript的代码本。完整的源码和类型稿编译器。 https:/codepen.ioSkylerSparkpenzYvpWNZ。

导致我出现问题的片段。

g.px & g.py是我的坐标。它们是从这个数组中抓取的（它是一个比萨饼销售的例子数组）。

const pizzas = {
    x: [0, 5, 10, 15, 20, 25, 30, 35, 40],
    y: [0, 1, 2, 3, 4],
    px: [0, 5.2, 7, 20.9, 34.3, 39.5],
    py: [0, 1.1, 1.3, 2.7, 3.5, 3.9]
};

// Draw Numbers
if (g.px.length == g.py.length) {
    console.log("confirm");
    for (var i = 1; i < g.px.length + 1; i++) {
        if (i == 1) {
            console.log("start");
            ctx.beginPath();
            ctx.moveTo(g.px[i], g.py[i]);
        } else if (i < g.px.length) {
            console.log("continue");
            ctx.lineTo(g.px[i], g.py[i]);
        } else {
            console.log("draw");
            ctx.stroke();
        }
        console.log(i);
    }
}

现在看下图，它运行得很好。

Answer 1

问题是你的y值需要是负值。在这样的情况下，通常只需要画出任何一条线，而不是立即使用循环。我通过添加以下代码发现了这一点

        ctx.beginPath();
        ctx.moveTo(-40, -40);
        ctx.lineTo(40, -40);
        ctx.lineTo(40, 40);
        ctx.lineTo(-40, 40);
        ctx.stroke();

就在你开始画线之前，这实际上显示了一些结果。如果我把 g.py[i] 到 -g.py[i] 到处都是，然后在图形的左下方加一条小线。希望对大家有所帮助!