Puis-je tracer des points x / y HTML5 de Canvas par programme à l’aide de jQuery avec des données JSON externes?

J’ai un canevas HTML5 de type “joindre les points” – 2 lignes avec des points à leurs points angulars – c’est correct, mais je souhaite tracer les coordonnées X par programmation avec des données JSON externes (extraites d’un serveur “local” afin JSONP) – J’espère pouvoir expliquer cela clairement …

Je n’essaie pas de convertir les données JSON en nouveaux éléments DOM, mais plutôt de les appliquer au script réel qui mappe les coordonnées de la zone de dessin. Idéalement, je veux utiliser jQuery pour cela et je suppose que je devrai parsingr un object JSON via .getJSON (), mais c’est là que j’ai besoin d’aide.

Les coordonnées X et Y sont actuellement lancées avec des variables codées en dur dans le script de dessin, mais je veux que les données JSON soient analysées dans la variable X par programmation (les coordonnées Y peuvent restr codées en dur et fonctionner correctement pour les deux lignes).

Voici un violon de ce que j’ai jusqu’à présent: http://jsfiddle.net/ByT58/6/

• Filtre d’image en tissu js
• Chart.js – Plusieurs graphiques de beignets sur la même canvas
• L’image convertie devrait avoir une petite URL à la place de BaseCode
• HTML5 Canvas sur iPhone met en évidence les événements touchstart / mousedown
• canvas toDataURL ne renvoyant pas une image complète

Voici le balisage / script pour référence – et un grand merci d’avance pour toute aide !:

HTML:

Voici à quoi ressemblerait le JSON externe:

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

JS:

 var ctx = document.getElementsByTagName('canvas')[0].getContext('2d'); // set atsortingbutes for all circles var radius = 7; // set atsortingbutes 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(); 

• Triangle réactif plein écran
• supprimer un trait précédent (créer une ligne temporaire) – Javascript / HTML5
• Comment éviter un fond noir lors de l’enregistrement d’une div en png
• Les objects FabricJS non relatifs au redimensionnement de la canvas
• Soundcloud modifie la couleur de la forme d’onde

 { 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 atsortingbutes for all circles var radius = 7; // set atsortingbutes 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 ); });