为何WebGL Canvas会受CSS背景影响？求配置排查方案

你遇到的现象核心原因是Canvas初始状态为透明，且未执行WebGL画布清除操作，导致绘制的半透明圆形边缘与CSS背景色发生混合：

• 当body背景为黑色时，Canvas透明区域透出黑色，橙色半透明边缘与黑色混合，呈现正常的渐变过渡；
• 当body背景为白色时，橙色半透明边缘与白色混合，计算后颜色偏黄（比如橙色rgba(1,0.5,0,0.5)和白色rgba(1,1,1,1)混合，结果是rgba(0.75,0.75,0.5,1)，视觉上偏黄）。

你提到调用gl.clearColor和gl.clear无效，是因为你提供的代码里没有实际执行这两个操作，画布始终保持初始透明状态。

要实现「画布为白色，圆形边缘显示正常（和body背景为黑色时的效果一致）」，需要两步：

1. 在绘制前，用gl.clear清除画布，将画布底色设置为白色；
2. 可选：关闭Canvas的alpha通道，避免Canvas与CSS背景的不必要混合（如果不需要Canvas透明的话）。

JavaScript代码（添加清除操作） #

let cv = document.createElement("canvas");
document.body.append(cv);
[ cv.width, cv.height ] = [50, 50];
// 可选：关闭alpha通道，避免和CSS背景混合
let gl = cv.getContext("webgl", { alpha: false });

function createProgram() {
    function initShader(ty, src) {
        let shader = gl.createShader(ty);
        gl.shaderSource(shader, src);
        gl.compileShader(shader);
        return shader;
    }

    let prog = gl.createProgram();
    gl.attachShader(prog, initShader(gl.VERTEX_SHADER, vs));
    gl.attachShader(prog, initShader(gl.FRAGMENT_SHADER, fs));
    gl.linkProgram(prog);
    gl.useProgram(prog);
    return prog;
}

const vs = `
attribute vec4 a_pos;
attribute float a_size;
void main() {
    gl_Position = a_pos;
    gl_PointSize = a_size;
}
`;

const fs = `
precision mediump float;

float alpha() {
    return 1. - distance(gl_PointCoord, vec2(.5, .5)) * 2.;
}
void main() {
    gl_FragColor = vec4(1.0, 0.5, 0.0, alpha());
}
`;

const prog = createProgram();

const a_pos = gl.getAttribLocation(prog, "a_pos");
const a_size = gl.getAttribLocation(prog, "a_size");

gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

// 关键：设置清除颜色为白色，并执行清除操作
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.vertexAttrib2f(a_pos, 0, 0);
gl.vertexAttrib1f(a_size, 50);
gl.drawArrays(gl.POINTS, 0, 1);

HTML代码（可保持不变，或修改body背景为白色测试） #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>gl</title>
    <style>
        body {
            background-color: #fff; /* 改为白色测试 */
        }
        canvas {
            transform: scale(16);
            transform-origin: 0 0;
            image-rendering: pixelated;
        }
    </style>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

• 关闭Canvas的alpha通道（getContext("webgl", { alpha: false })）后，Canvas会始终不透明，避免了Canvas透明区域透出CSS背景的问题，混合计算只会在WebGL内部的画布像素间进行；
• 混合模式gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA是常规的alpha混合，当画布底色为白色时，圆形半透明边缘会和白色混合，这正是你需要的目标效果——此时Canvas不透明，黑色背景不会透出，圆形边缘是橙色半透明和白色画布混合的结果，与你期望的一致。

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