WebGL中绘制的圆形全部相互连接问题求助

你的问题出在render函数里的gl.drawArrays调用参数错误，以及全局变量导致的潜在冲突：

1. gl.drawArrays参数理解错误 #

gl.drawArrays(mode, first, count)的第三个参数是要绘制的顶点数量，不是结束索引。你原来的循环里把第三个参数写成了i + 362，这会导致每次绘制的顶点数远远超过单个圆形所需的362个，从而把后续圆形的顶点也包含进当前的TRIANGLE_FAN绘制中，造成圆形之间互相连接。

同时，起始索引也不需要i + 1，每个圆形的起始索引就是i（第一个圆从0开始，第二个从362，以此类推）。

修正后的render函数：

function render() {
    gl.clear(gl.COLOR_BUFFER_BIT);
    // 遍历每个圆形，逐个绘制
    for (let i = 0; i < 10; i++) {
        const startIndex = i * 362;
        gl.drawArrays(gl.TRIANGLE_FAN, startIndex, 362);
    }
}

2. 全局变量i的潜在问题 #

你代码里的循环变量i没有用let或var声明，会成为全局变量。这可能导致init函数和render函数里的i互相干扰，比如你之前测试只画2个圆时出现第3个圆，很可能是全局变量i的值被意外修改导致的。

建议在所有循环里用let声明变量，比如：

// init里的循环
for (let i = 0; i < 10; i++) {
    // ... 原有代码
}

补充说明 #

每个圆形的顶点结构是正确的：1个中心顶点 + 361个圆周顶点（theta从0到360，共361个点），总共362个顶点，符合TRIANGLE_FAN的绘制要求（第一个顶点是扇心，后续顶点依次连接成扇形三角形）。

修正后每个圆形会被独立绘制，不会再出现互相连接的问题。

内容的提问来源于stack exchange，提问作者daCornchipe