JavaScriptとキャンバスで図形を描画する

Question

HTML 5キャンバスとJavaScriptを使用して図形を生成して描画しようとしています。私はできるだけドライなものにしたいと思っていますが、いくつか問題があります。これは、JSONからlineTo値を引いたときに動作していないよう

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

次のように私は、コードを持っています。私はlineTo(v[0],v[1])をlineTo(50,75)のloppに入れ替えて、塗りつぶした形を生成します。私はあなたが教えることができるように、JavaScriptではあまり良くありません。誰もが問題が何であるかを知っていて、多分いくつかの種類のリストから複数の図形を生成するためのアドバイスをしますか？私はあなたのコードで遊ん

乾杯

トニー

Answer 1

、それは完璧です。どういうわけか自分自身に戻る経路が何も塗りつぶさないので、描かれた三角形はありません。最初の2つの頂点だけを配置しても問題ありません。

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

このフィドルを参照してください：私はdocument.readyコメントアウトhttp://jsfiddle.net/Nm7UQ/

注意。