关键是cancelAnimationFrame 不能停止动画渲染

在你的代码中，`cancelAnimationFrame` 函数的使用是没有问题的，但是在某些情况下，它可能无法停止动画渲染。这可能是因为在动画停止之前，你已经请求了下一帧动画，从而导致 `cancelAnimationFrame` 失效。为了解决这个问题，你可以在每次请求动画帧之前，检查上一次请求的动画帧 ID 是否存在，并在存在的情况下，立即使用 `cancelAnimationFrame` 函数停止动画渲染。这样可以确保只有一个动画帧在队列中等待渲染，从而使 `cancelAnimationFrame` 函数能够正常工作。你可以尝试将 `render` 函数改写为以下代码，看看能否解决问题：

let requestId = null;

function render() {
  if (requestId) {
    cancelAnimationFrame(requestId);
  }
  const img_y = gl.clientHeight;
  const img_x = gl.clientWidth;
  ctx.drawImage(gl, 0, 0, img_x * y / img_y, y);
  requestId = requestAnimationFrame(render);
}

在这个版本的 `render` 函数中，我们使用了一个名为 `requestId` 的变量来存储上一次请求的动画帧 ID。在每次请求新的动画帧之前，我们首先检查 `requestId` 是否存在，并在存在的情况下，使用 `cancelAnimationFrame` 函数停止动画渲染。这样可以确保只有一个动画帧在队列中等待渲染，从而使 `cancelAnimationFrame` 函数能够正常工作。