jak rysować na płótnie przeczytać json?

Question

Próbuję przejść przez HTML5 canvas. Udało mi się rysować na płótnie, ale muszę to robić dynamicznie. To jest mój kod JavaScript:

var c=document.getElementById("yellow"); 
var ctx=c.getContext("2d"); 

ctx.beginPath(); 
ctx.moveTo(247,373); 
ctx.lineTo(0,390); 
ctx.lineTo(5,21); 
ctx.lineTo(245,0); 
ctx.lineTo(247,373); 
ctx.closePath(); 
ctx.fillStyle="#ffca05"; 
ctx.globalAlpha=0.7; 
ctx.strokeStyle = '#ffca05'; 
ctx.fill(); 
ctx.stroke(); 

muszę czytać dane z tego json array i rysować używając tych współrzędnych.

[{"x":"247", "y":"373"}, {"x":"0", "y":"390"},{"x":"5", "y":"21"},{"x":"245", "y":"0"}, {"x":"247", "y":"373"}] 

Answer 1

Wszystko co musisz zrobić, to iteracyjne nad obiekt JS w for pętli i wielokrotnie wykonać ctx.lineTo(). Uwaga: pierwszy ctx.lineTo() po ctx.beginPath() działa jak ctx.moveTo().

Można uruchomić ten fragment kodu, aby sprawdzić wynik:

var c=document.getElementById("yellow"); 
 
var ctx=c.getContext("2d"); 
 
var json=[ 
 
    {"x":"247", "y":"373"}, 
 
    {"x":"0", "y":"390"}, 
 
    {"x":"5", "y":"21" }, 
 
    {"x":"245", "y":"0" }, 
 
    {"x":"247", "y":"373"} 
 
]; 
 

 
ctx.beginPath(); 
 
for(var i in json){ 
 
    ctx.lineTo(json[i].x,json[i].y); 
 
} 
 
ctx.closePath(); 
 
ctx.fillStyle="#ffca05"; 
 
ctx.globalAlpha=0.7; 
 
ctx.strokeStyle="#ffca05"; 
 
ctx.fill(); 
 
ctx.stroke();

<canvas id="yellow" width="250" height="400"></canvas>

PS: mogę zauważyć, że górny narożnik przy górnej krawędzi obszaru roboczego (i przypuszczalnie lewa również) są nieco odcięte. Wystarczy dodać 1 lub tak, aby każda współrzędna to naprawić:

[ 
    {"x":"248", "y":"374"}, 
    {"x":"1", "y":"391"}, 
    {"x":"6", "y":"22" }, 
    {"x":"246", "y":"1" }, 
    {"x":"248", "y":"374"} 
]; 

Answer 2

nie mogę wypowiedzieć się jeszcze, ale jak do tej kwestii czytania zewnętrznego pliku JSON: Jeśli plik jest dostępny na jakiś URL, można użyć AJAX poprzez jQuery, aby łatwo uzyskać potrzebne dane JSON, przeanalizuj je i przechowuj w zmiennej lokalnej na stronę/aplikację. Krótki przykład:

var myJSON; //the json object data you're going to draw to canvas with 

$(document).ready(function(){ 
     $.ajax({ 
      url: "myurl.com/myjsonfile", 
      dataType: "text", 
      success: function(data) { 
       myJSON = $.parseJSON(data); 
       drawToCanvas(myJSON); //you can, perhaps, make the code 
             //Xufox provided into a function that 
             //you pass your myJSON var to once it 
             //is loaded. 
      } 
     }); 
    }) 

The „$ .ajax” wezwanie zajmie uzyskanie danych z adresu URL podanego powyżej, a wykona metodę "drawToCanvas() tylko wtedy, gdy dane zostały załadowane i przekazywane do myJSON (który jest następnie przekazywany do metody).

Państwo mogli odwoływać parametr bezpośrednio w swojej funkcji, lub zapisać go w zmiennej lokalnej:

function drawToCanvas(jsonObj) { 
    var json = jsonObj; 

    ctx.beginPath(); 
    for(var i in json){ 
     ctx.lineTo(json[i].x,json[i].y); 
    } 
    ...