如何为WebGL画布动态添加和移除边框？

当然可以实现！其实有几种超简便的方法，完全不用在WebGL的绘制逻辑里绕弯路，用CSS结合一点点JS就能轻松搞定，我给你拆解两个实用方案：

方案一：纯CSS + JS控制类名（最推荐） #

这个方法是最简单高效的，完全不干扰WebGL的绘图流程，用CSS定义边框样式，再通过JS根据条件动态给canvas添加/移除对应的类即可。

首先定义CSS样式：

/* 定义带红色边框的类 */
.red-canvas-border {
  /* 普通边框，会占用布局空间 */
  border: 2px solid red;
  /* 如果不想边框影响布局，可以用outline代替（不占盒模型空间） */
  /* outline: 2px solid red; */
}

然后在JS里根据条件控制类的添加/移除：

const canvas = document.getElementById('glCanvas');

// 封装一个更新边框的函数，传入你的判断条件
function updateCanvasBorder(shouldShow) {
  if (shouldShow) {
    canvas.classList.add('red-canvas-border');
  } else {
    canvas.classList.remove('red-canvas-border');
  }
}

// 举个例子，当你的特定条件满足时调用
// 比如某个状态变化、按钮点击或者渲染循环里检查条件
// updateCanvasBorder(yourIfConditionHere);

这个方案的优势在于：CSS处理样式性能更好，而且不会影响WebGL的绘图坐标（WebGL的视口基于canvas的width/height属性，和CSS样式尺寸无关，边框不会干扰画布内部的绘制）。

方案二：用WebGL绘制边框（适合需要嵌入画布内容的场景） #

如果你的需求是让边框成为画布内容的一部分（比如导出canvas为图片时要包含边框），那可以在WebGL的渲染流程里，根据条件绘制红色边框。

首先你需要一个简单的纯色绘制着色器程序（这里假设你已经有基础的WebGL环境搭建），然后封装一个绘制边框的函数：

// 绘制红色边框的函数
function drawRedBorder(gl, canvasWidth, canvasHeight, borderWidth = 1) {
  // 保存当前的WebGL程序，避免干扰原有绘制逻辑
  const currentProgram = gl.getParameter(gl.CURRENT_PROGRAM);
  // 切换到你的纯色绘制程序（需要提前创建好）
  gl.useProgram(borderProgram);

  // 设置边框颜色为红色
  const colorLoc = gl.getUniformLocation(borderProgram, 'uColor');
  gl.uniform4f(colorLoc, 1.0, 0.0, 0.0, 1.0);

  // 绘制四个边框条：上、下、左、右
  // 辅助函数：绘制矩形
  const drawRect = (x, y, w, h) => {
    const vertices = new Float32Array([
      x, y,
      x + w, y,
      x + w, y + h,
      x, y + h
    ]);
    const buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    
    const posLoc = gl.getAttribLocation(borderProgram, 'aPosition');
    gl.enableVertexAttribArray(posLoc);
    gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
    
    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
    gl.deleteBuffer(buffer);
  };

  // 上边
  drawRect(0, canvasHeight - borderWidth, canvasWidth, borderWidth);
  // 下边
  drawRect(0, 0, canvasWidth, borderWidth);
  // 左边
  drawRect(0, borderWidth, borderWidth, canvasHeight - 2 * borderWidth);
  // 右边
  drawRect(canvasWidth - borderWidth, borderWidth, borderWidth, canvasHeight - 2 * borderWidth);

  // 切换回原来的程序
  gl.useProgram(currentProgram);
}

然后在你的渲染循环里调用：

function render() {
  // 清除画布
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  // 绘制你的原有WebGL内容...

  // 根据条件决定是否绘制边框
  if (yourIfConditionHere) {
    // 传入画布的实际绘图尺寸（对应canvas的width/height属性）
    drawRedBorder(gl, 20, 20);
  }

  requestAnimationFrame(render);
}

这个方案的缺点是需要额外的WebGL代码，会增加一点渲染开销，但好处是边框会成为画布的一部分，导出图片时会包含进去。

总结一下：优先选方案一，简单高效；如果必须让边框成为画布内容的一部分，再用方案二。

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