为什么遍历数组可以绘制多个点？

Question

 ctx.addEventListener("click", (e) => {
    const x = e.clientX
    const y = e.clientY
    const {top, left, width, height} = e.target.getBoundingClientRect()
    const domx = x - left;
    const domy = y - top;
    const halfWidth = width / 2;
    const halfHeight = height / 2;
    const clickX = (domx - halfWidth) / halfWidth;
    const clickY = (halfHeight - domy) / halfHeight;
    gl.vertexAttrib2f(aPosition, clickX, clickY)
    gl.drawArrays(gl.POINTS, 0, 1)   
})

  const points = [];
  ctx.addEventListener("click", (e) => {
    const x = e.clientX
    const y = e.clientY
    const {top, left, width, height} = e.target.getBoundingClientRect()
    const domx = x - left;
    const domy = y - top;
    const halfWidth = width / 2;
    const halfHeight = height / 2;
    const clickX = (domx - halfWidth) / halfWidth;
    const clickY = (halfHeight - domy) / halfHeight;
    points.push({
      clickX,clickY
    })
    for (let i = 0; i < points.length; i++) {
      const {clickX, clickY} = points[i];
      gl.vertexAttrib2f(aPosition, clickX, clickY)
      gl.drawArrays(gl.POINTS, 0, 1)
    }
  })

我理解的是上面那种方法和下面那种都是重复绘制，为什么上面那种是覆盖，下面那种是添加？

Answer 1

yancy 2023-01-31 08:55:33

短时间多次调用绘制方法，会暂存webgl的缓冲区内容。上图这个方法，如果连续调用多次也可以看到绘制多个点的效果。

• 提问者 慕运维5378130 #1

  时间间隔多少算连续调用呢？

• 提问者 慕运维5378130 #2

  非常感谢！

Answer 2

慕雪6296728 2023-06-27 17:31:43

下面的方法每次点击都有去遍历数组进行绘制

Answer 3

慕尼黑5723975 2023-05-08 23:10:58

没覆盖吧。。点2下就是画了2个点啊