Произвольная форма получения рисунка в холсте HTML5

Question

Я пытаюсь нарисовать график, используя элемент холста HTML5. Граф состоит из вершин и ребер, соединяющих эти вершины. Я представляю вершины маленькими кругами и ребрами по линиям, соединяющим круги.

В моем проекте я хочу изменить положение вершин, когда нажата кнопка «Далее». Ниже показано состояние холста при первой загрузке страницы:

При нажатии кнопки «Далее» щелкают график перерисовывается, на основе новых координат вершин. Тем не менее, кажется, есть ошибка с рендерингом, как показано ниже:

Как ни странно, я не использую заливку() функцию в любом месте, так что я не в состоянии понять, почему заполненная часть приходит , Ниже приведен код функции ничьи(), который используется для построения графика:

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(), вы повторно используете один и тот же путь, поэтому он в конечном итоге заполняется. Начните новый путь с .beginPath():

// 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(). Это позволит вам сразу нарисовать все точки одним звонком до .fill().

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

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

According to the spec, .arc() не должны создать новый путь или подпуть. Реализация .arc() в Google Chrome не соответствует спецификации. В Chrome каждый вызов .arc() приводит к созданию нового подкаталога. Такое поведение является нестандартным.

Answer 2

Хорошо, глупая ошибка. Я забыл вызвать closePath() после рисования каждой строки.