我可以使用jQuery和外部JSON数据来编程绘制HTML5 Canvas x / y点吗？ [英] Can I plot HTML5 Canvas x/y points programatically using jQuery with external JSON data?
问题描述
我有一个HTML5画布加入点类型的东西去 - 在它们的角度点有两条线 - 这是很好，但我想绘制X坐标编程与外部JSON数据（拉从一个' 'server不需要JSONP） - 我希望我清楚地解释这个...
我不是试图将JSON数据转换为新的DOM元素，而是我需要将数据应用到映射画布坐标的实际脚本。理想情况下，我想使用jQuery为此，我的猜测是，我将需要通过.getJSON（）解析一个JSON对象，但这是我需要一些帮助。
X和Y坐标当前都是使用画布脚本中的硬编码变量启动的，但我想让JSON数据以程序的方式解析为X变量（Y协调可以保持硬编码，并且对两行都很好） / p>
这里是我到目前为止的一个小提琴： http： //jsfiddle.net/ByT58/6/
这里是标记/脚本供参考 - 并且预先感谢任何帮助！：
HTML：
< div class =canvas-wrap>
< canvas id =myCanvaswidth =200height =115>< / canvas>
< / div>
外部JSON的外观如下：
{
red：{
r01x：20，
r02x：149，
r03x：50
}，
blue：{
b01x：80，
b02x：179，
b03x：20
} b $ b}
JS：
var ctx = document.getElementsByTagName（'canvas'）[0] .getContext（'2d'）;
//设置所有圆的属性
var radius = 7;
//为所有行设置属性
ctx.lineWidth = 5;
ctx.lineJoin ='round';
//为Red
设置X协方法var r01x = 20;
var r02x = 149;
var r03x = 50;
//为Blue设置X协调
var b01x = 80;
var b02x = 179;
var b03x = 20;
//为红色和蓝色设置默认的Y坐标
var y01 = 20;
var y02 = 50;
var y03 = 100;
//红点
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（）;
//红线
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（）;
如果要将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'） ;
//设置所有圆的属性
var radius = 7;
//为所有行设置属性
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数据）;
}）
.fail（function（jqXHR，textStatus，errorThrown）{console.log（textStatus +::+ errorThrown）;}）;
I've got an HTML5 canvas 'join the dots' type thing going - 2 lines with dots at their angle points - this is fine but I want to plot the X coordinates programatically with external JSON data (pulled from a 'local' server so won't need to be JSONP) - I hope I explain this clearly ...
I'm not trying to convert the JSON data into new DOM elements, but instead I need to apply the data to the actual script which maps the canvas coordinates. Ideally I want to use jQuery for this and my guess is that I will need to parse a JSON object via .getJSON(), but this is where I need some help.
Both X and Y coordinates are currently initiated with hard-coded variables in the canvas script but I want the JSON data to parse into the X variable programatically (the Y co-ords can stay hard coded and work fine for both lines).
Here's a fiddle of what I have so far: http://jsfiddle.net/ByT58/6/
Here's the markup/script for reference - and big thanks in advance for any help!:
HTML:
<div class="canvas-wrap">
<canvas id="myCanvas" width="200" height="115"></canvas>
</div>
Here's how the external JSON would look:
{
"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();
If you were to put your JSON data into the form:
{
red: { color: "#E51919", x: [20,149,50] },
blue: { color: "#133175", x: [80,179,20] }
}
Your draw function would look something like (jsFiddle here):
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] }
});
Using JQuery to retrieve the JSON data from the server use jQuery.getJSON() or jQuery.ajax()
for example (no error handling...):
$.getJSON('path/data.json', function(data, textStatus, jqXHR) {
console.log(textStatus);
draw(data);
})
.fail(function( jqXHR, textStatus, errorThrown) { console.log(textStatus + " :: " + errorThrown ); });
这篇关于我可以使用jQuery和外部JSON数据来编程绘制HTML5 Canvas x / y点吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
