2012-04-14 174 views
1

我想要使用HTML 5 canvas和JavaScript生成和繪製形狀。我試圖儘可能幹,但有一些問題。我的代碼如下:使用JavaScript和Canvas繪製形狀

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

這似乎不是從JSON拉動lineTo值的時候。我可以將lineTo(v[0],v[1])替換爲lineTo(50,75),它會生成一個填充的形狀。你可以說,我對JavaScript並不擅長。有沒有人知道這裏的問題是什麼,也許給出一些關於從某種列表生成多個形狀的建議?

乾杯

託尼

+0

哎呦,我的壞。 ... – aaaidan 2012-04-14 23:02:51

回答

2

我用你的代碼發揮各地,它是完美無瑕的。沒有繪製三角形,因爲不知何故,路徑回到自己什麼都沒有。只放置前兩個頂點,它是可以的。

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

看到這個小提琴:http://jsfiddle.net/Nm7UQ/

注意,我註釋掉document.ready

+0

啊!我剛剛注意到這些座標已經回到原來的位置了,哈哈。改變它,它已經出現。謝謝! – 2012-04-15 02:08:19