1

我正在尝试使用 HTML 5 画布和 JavaScript 生成和绘制形状。我试图让它尽可能干燥，但有一些问题。我的代码如下：

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从 json 中提取值时，这似乎不起作用。我可以在lopp内部切换lineTo(v[0],v[1])for ，它会生成一个填充的形状。lineTo(50,75)如您所知，我并不擅长 JavaScript。有谁知道这里的问题是什么，并可能就从某种列表生成多个形状提供一些建议？

干杯

托尼

4

1 回答 1

2

我玩过你的代码，它完美无瑕。没有绘制三角形，因为不知何故，回到自身的路径什么也没有。只放置前两个顶点就可以了。

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

看到这个小提琴：http: //jsfiddle.net/Nm7UQ/

请注意，我注释掉了document.ready.

于 2012-04-14T23:32:53.557 回答