Question

请考虑这样的代码，在每个动画循环中调用draw()函数，其中清除阶段并将渐变应用于背景，并为形状更改x，y：

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_coords()函数中调用draw() - 问题是它只绘制并动画第一个形状，并跳过其余部分。当我跳过这个电话时，它可以正常工作。

我使用[X，X]坐标重置绘图，然后开始下一个形状。有人能告诉我这有什么问题吗？为什么当我绘制那些坐标时，它只会在第一个元素上绘制它们？

Answer 1

我想我知道你为什么会遇到问题。这就是这条线：

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

您说i = 0而不是var i = 0。

这意味着i是全球性的。

这意味着i中的draw_coords实际上是i draw()中的draw()。{/ p>

所以你从i中的第一个对象开始，0为i，然后你进入draw_coords并获取相同的10变量并将其递增为某个值大，如i。然后当第一个draw_coords完成时，它返回绘制并查看10（现在是draw）是否小于shapes.length（可能类似于6）。它并不少，所以for (var i = 0;中的for循环认为自己完成了！

你绝对不希望这样，所以你要改变你的两个for循环以获得var：

你在这里遇到的问题将会消失。

HTML5 CANVAS上的多个对象，仅绘制第一个项目

1 个答案: