Zeichnen von Formen mit JavaScript und Canvas

Question

Ich versuche, Formen mit HTML 5 Canvas und JavaScript zu generieren und zu zeichnen. Ich versuche, es so trocken wie möglich zu machen, aber einige Probleme zu haben. Ich habe den Code wie folgt:

var sections = { 
    "w_end" : { 
    "name":"W End", 
    "id":"w_end", 
    "dimensions": {"move_to":[0,0], "coords":[[0,50], [50,50], [0,50]]} 
    } 
} 
$(document).ready(function() { 
    $.each(sections, function(k,v){ 
    make_shape(k, v); 
    }) 
}); 

function make_shape(id, attributes) { 
    var holder = document.getElementById('room'); 
    var grid_canvas = document.createElement("canvas"); 
    holder.appendChild(grid_canvas); 
    grid_canvas.setAttribute("id", id); 
    var item = grid_canvas.getContext("2d"); 
    item.fillStyle = "rgb(154,250,50)"; 
    item.beginPath(); 
    item.moveTo(attributes.dimensions.move_to[0],attributes.dimensions.move_to[1]); 
    $.each(attributes.dimensions.coords, function(k ,v){ 
    item.lineTo(v[0],v[1]); 
    }); 
    item.fill(); 
    item.closePath(); 
} 

Dies nicht zu funktionieren scheinen, wenn die lineTo Werte aus dem json ziehen. Ich kann die lineTo(v[0],v[1]) für lineTo(50,75) innerhalb der Lopp wechseln und es erzeugt eine gefüllte Form. Ich bin nicht großartig in JavaScript, wie Sie sehen können. Weiß jemand, was das Problem hier ist, und vielleicht ein paar Tipps zum Generieren mehrerer Formen aus einer Liste?

Prost

Tony

Answer 1

ich mit Ihrem Code um gespielt, ist es einwandfrei. Es wird kein Dreieck gezeichnet, weil irgendwie der Pfad, der zu sich selbst zurückkehrt, nichts erfüllt. Platziere nur die ersten zwei Ecken und es ist OK.

"dimensions": {"move_to":[0,0], "coords":[[0,50], [50,50]]} 

Sehen Sie diese Geige: http://jsfiddle.net/Nm7UQ/

Bitte beachte, dass ich aus document.ready kommentiert.