我想要使用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並不擅長。有沒有人知道這裏的問題是什麼,也許給出一些關於從某種列表生成多個形狀的建議?
乾杯
託尼
哎呦,我的壞。 ... – aaaidan 2012-04-14 23:02:51