我可以绘制HTML5画布x/y点编程使用jQuery与外部JSON数据

我有一个HTML5画布'加入点'类型的东西- 2线与点在他们的角度点-这很好，但我想用外部JSON数据编程地绘制X坐标(从'本地'服务器拉出，所以不需要JSONP) -我希望我解释清楚…

我没有尝试将JSON数据转换为新的DOM元素，而是需要将数据应用于映射画布坐标的实际脚本。理想情况下，我想使用jQuery，我的猜测是，我将需要通过。getjson()解析JSON对象，但这是我需要一些帮助的地方。

X和Y坐标目前都是用画布脚本中的硬编码变量初始化的，但我希望JSON数据以编程方式解析为X变量(Y协同词可以保持硬编码，并且对两行都有效)。

这里是我到目前为止的一个小提琴:http://jsfiddle.net/ByT58/6/

这里是供参考的标记/脚本-并提前感谢任何帮助!: HTML:

<div class="canvas-wrap">
        <canvas id="myCanvas" width="200" height="115"></canvas>
    </div>

下面是外部JSON的样子:

{
    "red": {
        "r01x": 20,
        "r02x": 149,
        "r03x": 50
    },
    "blue": {
        "b01x": 80,
        "b02x": 179,
        "b03x": 20
    }
}

JS:

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 ); });