Javascript 我可以使用带有外部JSON数据的jQuery以编程方式绘制HTML5画布x/y点吗？

我有一个HTML5画布“连接点”类型的东西-2条线，点在它们的角度点-这很好，但我想用外部JSON数据编程绘制X坐标（从“本地”服务器提取，所以不需要是JSONP）-我希望我解释清楚

我不想将JSON数据转换成新的DOM元素，而是需要将数据应用到映射画布坐标的实际脚本中。理想情况下，我想使用jQuery来实现这一点，我猜我需要通过.getJSON（）解析JSON对象，但这正是我需要帮助的地方

X和Y坐标当前都是在canvas脚本中使用硬编码变量启动的，但我希望JSON数据以编程方式解析到X变量中（Y坐标可以保持硬编码，并且对这两行都可以正常工作）

以下是我到目前为止所掌握的一些资料：

以下是供参考的标记/脚本-非常感谢您的帮助！：

HTML:

JS:

---

如果要将JSON数据放入表单中：

{
    red:  { color: "#E51919", x: [20,149,50] },
    blue: { color: "#133175", x: [80,179,20] }
}

您的draw函数看起来像（）：

---

如果要将JSON数据放入表单中：

{
    red:  { color: "#E51919", x: [20,149,50] },
    blue: { color: "#133175", x: [80,179,20] }
}

您的draw函数看起来像（）：

---

你注意到你重复了代码了吗？这是否暗示您应该使用数组和循环？是的，逻辑是1：将json键/值绘制到多维数组中，2：使用

.each（）

解析数组并将数组键/值插入画布脚本变量。麻烦的是我的排版不符合这个要求——我可能会对插入DOM的元素这样做，但不知道如何将它们解析到画布脚本中。我猜你是来这里寻求建议的。你注意到你重复了代码吗？这是否暗示您应该使用数组和循环？是的，逻辑是1：将json键/值绘制到多维数组中，2：使用

.each（）

解析数组并将数组键/值插入画布脚本变量。麻烦的是我的排版不符合这个要求——我可能会对插入DOM的元素这样做，但不知道如何将它们解析到画布脚本中。我猜你是来这里寻求建议的。太棒了，非常感谢！使用脚本文件中包含的json数据，可以在本地主机上完美运行。然而，当我注释掉内联json并使用

$getJSON

时，它不起作用，并且我没有收到任何控制台错误。我已经更新了提琴，以反映我在本地所做的事情，有什么明显的错误吗？我正在本地主机文件中调用jquery cdn，所以这不是问题所在。请在这里给出建议？我不是想偷懒，但我看不出哪里出了问题。在控制台中，我得到

http://localhost:9000/html5/canvas/data-3.json

和一条200OK消息，我在json调用前后都有控制台日志，所以我相信一切都很好。有什么建议吗？很难说-您可以尝试直接在浏览器中访问data-3.json。我唯一能建议的是在处理程序中设置一个断点，并遍历代码以更好地了解可能发生的情况。顺便说一句：还用错误处理程序更新了上面的示例，向您展示了如何获得有关故障的更多详细信息。谢谢，实际上，您已经尝试了您提到的两种方法，可以在浏览器中看到文件，并使用2x.fail函数看到语法错误，bummer。jsonlint也会调用json数据上的语法错误，这些数据在内联引用时可以正常工作。我想读几本书，但现在也要从这里开始——英国时间。谢谢你，我以后再打。太棒了，非常感谢！使用脚本文件中包含的json数据，可以在本地主机上完美运行。然而，当我注释掉内联json并使用

$getJSON

时，它不起作用，并且我没有收到任何控制台错误。我已经更新了提琴，以反映我在本地所做的事情，有什么明显的错误吗？我正在本地主机文件中调用jquery cdn，所以这不是问题所在。请在这里给出建议？我不是想偷懒，但我看不出哪里出了问题。在控制台中，我得到

http://localhost:9000/html5/canvas/data-3.json

和一条200OK消息，我在json调用前后都有控制台日志，所以我相信一切都很好。有什么建议吗？很难说-您可以尝试直接在浏览器中访问data-3.json。我唯一能建议的是在处理程序中设置一个断点，并遍历代码以更好地了解可能发生的情况。顺便说一句：还用错误处理程序更新了上面的示例，向您展示了如何获得有关故障的更多详细信息。谢谢，实际上，您已经尝试了您提到的两种方法，可以在浏览器中看到文件，并使用2x.fail函数看到语法错误，bummer。jsonlint也会调用json数据上的语法错误，这些数据在内联引用时可以正常工作。我想读几本书，但现在也要从这里开始——英国时间。谢谢你，我以后再打这个。

var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');

// set attributes for all circles
var radius = 7;

// set attributes for all lines
ctx.lineWidth = 5;
ctx.lineJoin = 'round';

// set X co-ords for Red
var r01x = 20;
var r02x = 149;
var r03x = 50;

// set X co-ords for Blue
var b01x = 80;
var b02x = 179;
var b03x = 20;

// Set default Y coordinates for both Red and Blue
var y01 = 20;
var y02 = 50;
var y03 = 100;

// RED dots
ctx.beginPath();
ctx.fillStyle = "#E51919";
ctx.arc(r01x, y01, radius, 0, Math.PI * 2, true);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "#E51919";
ctx.arc(r02x, y02, radius, 0, Math.PI * 2, true);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "#E51919";
ctx.arc(r03x, y03, radius, 0, Math.PI * 2, true);
ctx.fill();
ctx.closePath();

// RED line
ctx.beginPath();
ctx.moveTo(r01x, y01);
ctx.lineTo(r02x, y02);
ctx.lineTo(r03x, y03);     
ctx.strokeStyle = "#E51919";
ctx.stroke();
ctx.closePath();

// BLUE dots
ctx.beginPath();
ctx.fillStyle = "#133175";
ctx.arc(b01x, y01, radius, 0, Math.PI * 2, true);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "#133175";
ctx.arc(b02x, y02, radius, 0, Math.PI * 2, true);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "#133175";
ctx.arc(b03x, y03, radius, 0, Math.PI * 2, true);
ctx.fill();
ctx.closePath();

// BLUE line
ctx.beginPath();
ctx.moveTo(b01x, y01);
ctx.lineTo(b02x, y02);
ctx.lineTo(b03x, y03);     
ctx.strokeStyle = "#133175";
ctx.stroke();
ctx.closePath();

{
    red:  { color: "#E51919", x: [20,149,50] },
    blue: { color: "#133175", x: [80,179,20] }
}

function draw(data) {
    var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');

    // set attributes for all circles
    var radius = 7;

    // set attributes for all lines
    ctx.lineWidth = 5;
    ctx.lineJoin = 'round';

    var y = [20,50,100];
    for(var key in data) {
        var x = data[key].x;
        ctx.fillStyle = data[key].color;
        for(var i = 0; i < x.length; ++i) {
            ctx.beginPath();
            ctx.arc(x[i], y[i], radius, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.closePath();
        }

        ctx.beginPath();
        ctx.moveTo(x[0], y[0]);
        ctx.lineTo(x[1], y[1]);
        ctx.lineTo(x[2], y[2]);
        ctx.strokeStyle = data[key].color;
        ctx.stroke();
        ctx.closePath();
    }
}

draw({
    red:  { color: "#E51919", x: [20,149,50] },
    blue: { color: "#133175", x: [80,179,20] }
});

$.getJSON('path/data.json', function(data, textStatus, jqXHR) {
    console.log(textStatus);
    draw(data);
})
.fail(function( jqXHR, textStatus, errorThrown) { console.log(textStatus + " :: " + errorThrown ); });