HTML5上的多個對象CANVAS，只繪製第一項

請考慮這樣的代碼，draw()函數在每個動畫循環中被調用，其中階段被清除並且梯度被應用於背景並且x，y被更改爲形狀：HTML5上的多個對象CANVAS，只繪製第一項

draw = function() { 
    for (i = 0; i < shapes.length; i++) 
    { 
     draw_sample_shape(i); 
     draw_coords(i); 
    } 
} 

draw_sample_shape = function(shape) { 
    ctx.globalCompositeOperation = "source-over"; 
    ctx.fillStyle = color; 
    ctx.beginPath(); 
    ctx.arc(shapes[shape].x, shapes[shape].y, 240, 0, Math.PI*2, false); 
    ctx.closePath(); 
    ctx.fill(); 
} 

draw_coords(shape) { 
    coords = shapes[shape].coords; 
    ctx.globalCompositeOperation = "destination-out"; 
    ctx.beginPath(); 
    ctx.moveTo(coords[0].x, coords[0].y); 
    for (i = 1; i < coords.length; i++) 
    { 
     if (coords[i].y == 'X' && coords[i].x == 'X') 
     { 
      ctx.closePath(); 
      ctx.fill(); 
      ctx.moveTo(0, 0); 
      ctx.beginPath(); 
      if (typeof(coords[i+1]) != 'undefined') 
      { 
       ctx.moveTo((coords[i+1].x), (coords[i+1].y)); 
      } 
     } 
     else 
     { 
      ctx.lineTo((coords[i].x), (coords[i].y)); 
     } 
    } 
    ctx.closePath(); 
    ctx.fill(); 
}

現在一切都運行完美，除非我在draw()函數中調用draw_coords() - 問題是它吸引和動畫只有第一個形狀，並跳過他們的休息。當我跳過這個呼叫時，它工作正常。

我使用[X，X]座標來重置圖形，並開始下一個形狀。有人能告訴我什麼是錯的嗎？以及爲什麼當我繪製這些座標時，它只會在第一個元素上繪製它們？

來源

2011-12-28 Turek

你能給我們一個「形狀」的例子嗎？ – 2011-12-28 15:20:37

我想我知道你爲什麼會遇到問題。這是該行：

for (i = 0; i < shapes.length; i++)

你是說i = 0而不是var i = 0。

這意味着i是全球性的。

這意味着在draw_coords中的i實際上是在draw()中破壞了您的i！

所以，你開始在draw()的第一個對象上i爲0，然後你進入draw_coords，並採用相同的i變量，它增加的東西大，像10。然後，當第一個draw_coords完成時，它會返回繪製並查看i（現在的10）是否小於shapes.length（可能類似於6）。這並不少，所以draw中的for循環認爲自己完成了！

你肯定不希望這樣，所以既改變你的for循環有VAR：

for (var i = 0;

，你卻在這裏大約會消失的問題。

來源

2011-12-28 16:25:08

謝謝你！就是這樣......我幾乎整天都在爲這個問題苦苦掙扎。 – Turek 2011-12-28 21:18:27

HTML5上的多個對象CANVAS，只繪製第一項

回答

相關問題