HTML5 캔버스에서 임의의 도형을 그려야합니다

Question

HTML5 캔버스 요소를 사용하여 그래프를 그리려고합니다. 그래프는 정점과이 정점을 연결하는 모서리로 구성됩니다. 저는 원을 연결하는 선들에 의해 작은 원들과 가장자리들에 의해 꼭지점들을 나타냅니다.

내 프로젝트에서 '다음'버튼을 누르면 정점의 위치를 ​​변경하고 싶습니다. 다음 버튼이 클릭 그래프

는 새로운 정점의 좌표에 기초하여, 다시 그려진다 : 페이지가 처음로드 캔버스 상태가 아래 도시되어있다. 그러나, 아래 그림과 같이 렌더링 오류 것 같다 : 이상하게도, 난 아무데도() 함수를 채우기를 사용하고 있지 않다

, 그래서 채워진 부분이 오는 이유를 이해할 수 없습니다입니다 . 다음은 그래프 그리기에 사용되는 draw() 함수의 코드입니다.

function draw(position) 
{ 
    var canvas_elem = document.getElementById('drawing'); 

    // Check the element is in the DOM and the browser supports canvas 
    if(canvas_elem.getContext) 
    { 
     // Initaliase a 2-dimensional drawing context 
     var canvas = canvas_elem.getContext('2d'); 

     // Clear canvas 
     canvas.clearRect(0, 0, canvas_elem.width, canvas_elem.height); 

     var data = data_array[num_vertices+1+position].split(","); 

     // Draw all vertices 
     for(var i=0; i<num_vertices; i++) 
     { 
      canvas.arc(data[2*i], data[2*i+1], radius, 0, 2 * Math.PI, false); 
      canvas.fillStyle = 'black'; 
      canvas.fill(); 
     } 

     // Connect vertices by lines according to adjacency matrix 
     for(var i=0;i<num_vertices; i++) 
     { 
      for(var j=i; j<num_vertices; j++) 
      { 
       if(adjacency[i][j]==1) 
       { 
        canvas.beginPath(); 
        canvas.moveTo(data[2*i],data[2*i+1]); 
        canvas.lineTo(data[2*j],data[2*j+1]); 
        canvas.stroke(); 
       } 
      } 
     } 
    } 
    else 
    { 
     alert("Please use an HTML5 compatible browser."); 
    } 
} 

여기에서 일어날 수있는 모든 문제는 무엇입니까? 디버깅 이러한 변수의 값을 다음

---

테이크는 :

data_array=[ 
"10", 
"0,1,1,0,0,0,0,0,0,0", 
"1,0,0,1,0,0,0,0,0,1", 
"1,0,0,0,1,0,0,0,0,1", 
"0,1,0,0,0,1,0,0,1,1", 
"0,0,1,0,0,0,1,0,1,1", 
"0,0,0,1,0,0,0,1,1,0", 
"0,0,0,0,1,0,0,1,1,0", 
"0,0,0,0,0,1,1,0,0,0", 
"0,0,0,1,1,1,1,0,0,0", 
"0,1,1,1,1,0,0,0,0,0", 
"10,2,35.4,23.3,88.9,100,210,350,70,500,412,208,336,112,45,32,89,92,102,23", 
"30,4,19.4,35.3,80.9,90,230,310,120,440,400,220,330,105,40,29,80,89,90,18" 
] 

num_vertices=10 

Answer 1

.arc()있어서, 상기 전류 경로에 포인트를 추가하고, .fill()있어서, 상기 전류 경로에 채운다. 계속 .arc()으로 전화를 걸면 동일한 경로를 다시 사용하므로 결국 채워집니다.

// Draw all vertices 
for(var i=0; i<num_vertices; i++) 
{ 
    canvas.beginPath(); 
    canvas.arc(data[2*i], data[2*i+1], radius, 0, 2 * Math.PI, false); 
    canvas.fill(); 
} 

http://jsfiddle.net/PAPr5/2/

을 또는 .moveTo()을 사용하여 새 하위 경로를 시작 .beginPath()와 새 경로를 시작합니다. 이제 .fill() 번으로 모든 포인트를 한 번에 페인트하자.

http://jsfiddle.net/PAPr5/5/

According to the spec

// Draw all vertices 
for (var i = 0; i < num_vertices; i++) { 
    var x = data[2 * i]; 
    var y = data[2 * i + 1] 
    canvas.moveTo(x, y); 
    canvas.arc(x, y, radius, 0, 2 * Math.PI, false); 
} 
canvas.fill(); 

, .arc() 새로운 경로 또는 하위 경로를 생성 할 것이다. Chrome에서 .arc()을 (를) 구현하면 사양을 준수하지 않습니다. Chrome에서 .arc()을 호출하면 새로운 하위 경로가 생성됩니다. 이 동작은 비표준입니다.

Answer 2

오케이, 어리석은 실수. 각 줄을 그린 후에 closePath()를 호출하는 것을 잊어 버렸습니다.