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，只绘制第一项

回答

相关问题