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

发布于 2024-12-23 02:18:02 字数 1380 浏览 1 评论 0 原文

请考虑这样的代码，在每个动画循环中调用 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() 函数中调用 draw_coords() - 问题是它只绘制第一个形状并为其设置动画，并跳过其余的形状。当我跳过这个调用时，它工作正常。

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

原文

Please consider such code, draw() function is called in each animation loop, where stage is cleared and gradient is applied to a background and x,y are changed for shapes:

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

Now everything works perfect, unless I call draw_coords() in my draw() function - the problem is it draws and animates only the first shape, and skips the rest of them. When I skip this call it works OK.

I use the [X,X] coords to reset drawing, and start the next shape.
Can someone tell me what is wrong with that? and why when I draw that coords it only draws them on first element?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一个人的旅程 2024-12-30 02:18:02

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

for ( i = 0; 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;

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