Question

我试图将一个点数组传递到Javascript画布上。该脚本从JSON文件中提取数组。我知道ajax调用是连接到JSON文件的事实，所以我不打算在问题中包含它。这是脚本和JSON文件。

JS

var x1 = result[0].back_line.x1;
var y1 = result[0].back_line.y1;
var x2 = result[0].back_line.x2;
var y2 = result[0].back_line.y2;
var stroke = result[0].back_line.stroke;
var stroke_width = result[0].back_line.width;

for(var i = 0; i < x1.length - 1; i++){
    ctx.beginPath();
    ctx.moveTo(x1[i], y1[i]);
    ctx.lineTo(x2[i], y2[i]);
    ctx.lineWidth = stroke_width;
    ctx.strokeStyle = stroke;
    ctx.stroke();
}

JSON

[{
    "back_lines": {
        "width": 6,
        "stroke": "#000000",
        "x1": [938.4, 621.283, 621.283, 604.267, 549.1, 504.233, 582.817, 582.817, 380.033, 477.5, 477.5, 379.42, 379.42, 344.73, 344.73, 588.37, 646.6, 646.6, 804.33, 804.33, 601.05, 601.05, 597.433, 597.433, 475.433, 362.467, 208.8, 191.217, 191.217, 645.017, 645.017, 866.617, 866.617, 849.25, 849.25, 849.25, 360.033, 360.033, 360.033, 209.8, 209.8, 566.5, 566.5, 611, 611, 360.033, 478.05, 793.083, 793.083, 576, 793.083, 843.32, 843.32, 478.05, 504.233, 504.233, 587.37, 646.07, 646.07, 804.43, 803.4, 622.52, 622.52],
        "y1": [258.167, 177.82, 177.82, 258.167, 257.633, 256.633, 257.9, 214.22, 214.22, 366, 484.133, 269.767, 308.82, 308.82, 557.05, 483.5, 483.5, 515, 515, 499.2, 483, 434.3, 141.667, 111.267, 111.267, 111.267, 111.267, 111.267, 586.083, 586.083, 534.783, 534.783, 515.417, 499.2, 499.2, 409.683, 111.267, 111.267, 84.383, 84.383, 577.7, 577.7, 577.7, 577.7, 498.667, 84.383, 84.383, 84.383, 377.233, 377.233, 84.383, 84.383, 120.5, 84.383, 366, 466.15, 467.27, 467.27, 394.52, 394.52, 409.7, 467.8, 403.42],
        "x2": [868, 621.283, 621.283, 604.267, 549.1, 504.233, 582.817, 582.817, 380.033, 477.5, 477.5, 379.42, 379.42, 344.73, 344.73, 588.37, 646.6, 646.6, 804.33, 804.33, 601.05, 601.05, 597.433, 597.433, 475.433, 362.467, 208.8, 191.217, 191.217, 645.017, 645.017, 866.617, 866.617, 849.25, 849.25, 849.25, 360.033, 360.033, 360.033, 209.8, 209.8, 566.5, 566.5, 611, 611, 360.033, 478.05, 793.083, 793.083, 576, 793.083, 843.32, 843.32, 478.05, 504.233, 504.233, 587.37, 646.07, 646.07, 804.43, 803.4, 622.52,  622.52],
        "y2": [258.167, 225.45, 225.45, 258.167, 257.633, 256.633, 257.9, 214.22, 214.22, 366, 484.133, 269.767, 308.82, 308.82, 557.05, 483.5, 483.5, 515, 515, 499.2, 483, 434.3, 141.667, 111.267, 111.267, 111.267, 111.267, 111.267, 586.083, 586.083, 534.783, 534.783, 515.417, 499.2, 499.2, 409.683, 111.267, 111.267, 84.383, 84.383, 577.7, 577.7, 577.7, 577.7, 498.667, 84.383, 84.383, 84.383, 377.233, 377.233, 84.383, 84.383, 120.5, 84.383, 366, 466.15, 467.27, 467.27, 394.52, 394.52, 409.7, 467.8, 403.42]
    }
}]

我得到的错误是： Uncaught TypeError: Cannot read property 'x1' of undefined

但是，如果我没有做一个数组而只是尝试做一个点，则没有错误，并且该线被绘制到画布上。 我在数组中循环错误吗？我是否需要为每个阵列执行多个for循环？由于数组长度相同，我只需要遍历其中一个，对吧？

Answer 1

在您编写的JS代码中

：

var x1 = result[0].back_line.x1;

尝试

var x1 = result[0].back_lines.x1;

传递一系列点以绘制到画布上

1 个答案: