使用 JSON 文件绘制到 canvas

Question

我正在尝试使用 ajax 将 json 对象中的行信息调用到 canvas 中。我是 json 的新手，所以我不太确定该怎么做。这是我目前所拥有的。

JSON

{
    "line": {
        "width": 3,
        "stroke": "#FFFFFF",
        "x1": "640.386",
        "y1": "258.163",
        "x2": "816.364",
        "y2": "258.163"
    }   
}

JS

$(document).ready(function(){
    var canvas = document.getElementById("schematic_holder");
    var ctx = canvas.getContext("2d");

    $.ajax({
        type: "GET",
        dataType: "json",
        url: "js/app/json/nst.json",
        success: function(result){
            $.each(result.line, function(){
                console.log(result.line);
            })
        },
        complete: function(){
            console.log("Complete!");
        }
    })
})

HTML

<body>
    <canvas id="schematic_holder"></canvas>
</body>

现在，当我打印到控制台时，出现未定义的错误。我叫这个对象错了吗？我知道如何使用 canvas 绘制线条，我只是对如何从 JSOn 文件中绘制线条感到困惑。提前致谢。

Answer 1

尝试将整个 json 文件括在方括号 [] 中，像这样

[{
    "line": {
        "width": 3,
        "stroke": "#FFFFFF",
        "x1": "640.386",
        "y1": "258.163",
        "x2": "816.364",
        "y2": "258.163"
    }   
}]

使用 JSON 文件绘制到 canvas

Drawing to canvas using JSON file

javascript

jquery

json

canvas