1

HTML5キャンバスと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();
}

lineTojsonから値を取得する場合、これは機能しないようです。lineTo(v[0],v[1])ループの内側のを切り替えることができlineTo(50,75)、塗りつぶされた形状が生成されます。お分かりのように、私はJavaScriptが得意ではありません。誰かがここでの問題が何であるかを知っていて、ある種のリストから複数の形状を生成することについてアドバイスを与えるかもしれませんか？

乾杯

トニー

4

1 に答える 1

2

私はあなたのコードをいじってみました、それは完璧です。どういうわけかそれ自体に戻るパスは何も満たさないので、三角形は描かれていません。最初の2つの頂点だけを配置すれば、問題ありません。

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

このフィドルを参照してください：http：//jsfiddle.net/Nm7UQ/

コメントアウトしたことに注意してくださいdocument.ready。

于 2012-04-14T23:32:53.557 に答える