我正在尝试使用 HTML 5 Canvas 和 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();
}
从 json 中提取 lineTo
值时,这似乎不起作用。我可以在 lopp 内将 lineTo(v[0],v[1])
切换为 lineTo(50,75)
,它会生成一个填充形状。如您所知,我不擅长 JavaScript。有谁知道这里的问题是什么,并且可能会就从某种列表生成多个形状提供一些建议?
干杯
托尼
最佳答案
我试过你的代码,它完美无缺。没有绘制三 Angular 形,因为不知何故返回自身的路径什么也没有填充。只放置前两个顶点就可以了。
"dimensions": {"move_to":[0,0], "coords":[[0,50], [50,50]]}
请参阅此 fiddle :http://jsfiddle.net/Nm7UQ/
请注意,我注释掉了 document.ready
。
关于javascript - 使用 JavaScript 和 Canvas 绘制形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10158030/