1

我有一个 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();
4

1 回答 1

1

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

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

您的绘图函数看起来像（此处为 jsFiddle）：

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

使用 JQuery 从服务器检索 JSON 数据使用jQuery.getJSON()或jQuery.ajax()

例如（没有错误处理......）：

$.getJSON('path/data.json', function(data, textStatus, jqXHR) {
    console.log(textStatus);
    draw(data);
})
.fail(function( jqXHR, textStatus, errorThrown) { console.log(textStatus + " :: " + errorThrown ); });
于 2013-06-08T17:11:16.420 回答