JavaScript 및 캔버스로 도형 그리기

Question

HTML 5 캔버스 및 JavaScript를 사용하여 모양을 생성하고 그려야합니다. 가능한 한 DRY로 만들려고 노력 중이지만 문제가 있습니다. 이것은 JSON에서 lineTo 값을 당기는 때 작동하지 않는 것

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

다음과 같이 나는 코드가 있습니다. lopp 안에 을 lineTo(50,75)으로 바꿀 수 있으며 채워진 모양을 생성합니다. 나는 자바 스크립트가 훌륭하다고 말할 수 없다. 누구든지이 문제가 무엇인지 알고 있으며 어쩌면 어떤 종류의 목록에서 여러 모양을 생성하는 것에 대한 조언을 줄 수 있습니까?

건배

토니

난 당신의 코드와 함께 놀았

Answer 1

, 그것은 흠이다. 어떻게 든 그 자체로 돌아가는 경로는 아무것도 채우지 않기 때문에 그려진 삼각형이 없습니다. 처음 두 꼭지점 만 놓으면 OK입니다.

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

이 바이올린을 참조하십시오 : 나는 document.ready에서 주석 http://jsfiddle.net/Nm7UQ/

참고.