画布 webgl 的背景图像答案

【问题标题】：background img for canvas webgl画布 webgl 的背景图像
【发布时间】：2017-02-15 01:42:41
【问题描述】：

我正在尝试将 img 添加到 3d webgl 画布应用程序的背景中，但由于某种原因它无法正常工作，我错过了什么？我想我有所有必需的初始化步骤。

    initBkgnd();
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);
    tick();


function tick() {
    requestAnimFrame(tick);
    drawScene();
    initBkgnd();
    animate();
}

function initBkgnd() {
    backTex = gl.createTexture();
    backTex.Img = new Image();
    backTex.Img.onload = function() {
        handleBkTex(backTex);
    }
    backTex.Img.src = "textures/stars.jpg";
}

function handleBkTex(tex) {
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, tex.Img);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.bindTexture(gl.TEXTURE_2D, null);
}

【问题讨论】：

“不工作”是什么意思？
什么都没发生，它不显示img
任何 ieda @gre_gor？我没有收到任何错误
路径是否正确？
是的@Ted。双重检查

标签： javascript html canvas html5-canvas webgl

【解决方案1】：

好的，我明白了。这是答案，改变：

initBkgnd();
gl.clearColor(0.0, 0.0, 0.0, 1.0);

到

gl.clearColor(0.0, 0.0, 0.0, 0.0);
initBkgnd();

并添加到画布元素样式：

<canvas id="myCanvas" style="background: url('textures/stars.jpg')" width="1400" height="800"></canvas>

【讨论】：