canvas webgl 的背景图片

Question

我试图将 img 添加到 3d webgl canvas 应用程序的背景中，但由于某种原因它不起作用，我错过了什么？我想我已经完成了所有必需的初始化步骤。

    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);
}

Answer 1

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

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

至

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

并添加到 canvas 元素样式：

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

canvas webgl 的背景图片

background img for canvas webgl

html

javascript

canvas

webgl

html5-canvas