Question

我希望有一个带有webgl背景的网站到透明网站。

鉴于浏览器的各种状态，最安全的方法是什么？

Answer 1

我认为你只想制作一个画布并设置它的CSS以填充背景

<!DOCTYPE html>
<html>
  <head>
  <style>
/* make the canvas fill the page and not scroll */
#c {
   position: fixed;
   left: 0px;
   top: 0px;
   z-index: -10;
   width: 100vw;
   height: 100vh;
}
/* remove the margin on the body so the canvas goes to the edge */
body {
    margin: 0;
}
/* make a new body with standard margins */
#body {
    margin: 8px;
}
  </style>
  </head>
  <body>
    <canvas id="c"></canvas>
    <div id="body">
    <!-- insert rest of html here -->
    </div>
  </body>
</html>

然后确保画布尺寸正确

var canvas = document.getElementById("c");
var gl = canvas.getContext("webgl");

// make the canvas match the size it's displayed.    
var resize = function() {
    var width = gl.canvas.clientWidth;
    var height = gl.canvas.clientHeight;
    if (gl.canvas.width != width || gl.canvas.height != height) {
        gl.canvas.width = width;
        gl.canvas.height = height;
    }
};

var render = function() {
    resize();
    gl.clearColor(1, Math.random() * 0.2 + 0.8, 1, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // insert rendering code here

    requestAnimationFrame(render);
};
render();

此示例仅清除画布（最简单的示例）。这是一个片段

＆＃13;

var canvas = document.getElementById("c");
var gl = canvas.getContext("webgl");

var resize = function() {
    var width = gl.canvas.clientWidth;
    var height = gl.canvas.clientHeight;
    if (gl.canvas.width != width || gl.canvas.height != height) {
        gl.canvas.width = width;
        gl.canvas.height = height;
    }
};

var render = function() {
    resize();
    gl.clearColor(1, Math.random() * 0.2 + 0.8, 1, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    requestAnimationFrame(render);
};
render();

＆＃13;

#c {
   position: fixed;
   left: 0px;
   top: 0px;
   z-index: -10;
   width: 100vw;
   height: 100vh;
}
body {
    margin: 0;
}
#body {
    margin: 8px;
}

＆＃13;

<canvas id="c"></canvas>
<div id="body">
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec gravida est, nec fermentum metus. Suspendisse congue ante elit, vitae accumsan quam convallis nec. Integer sodales, nibh id ultricies hendrerit, risus lacus varius ligula, quis porta nulla massa sit amet quam. Praesent posuere vulputate nunc, ac convallis nulla consectetur eget. Vestibulum eu dapibus justo. Aenean ac venenatis sem. Nullam porta, augue at egestas pretium, diam metus suscipit eros, eu eleifend quam diam in lacus. Fusce accumsan sem in placerat blandit. Nulla eget hendrerit lorem, at semper leo. Duis non commodo tellus.
</p><p>
Sed feugiat velit vel ipsum fermentum, a scelerisque dolor tincidunt. Vestibulum id odio ultrices metus consectetur vehicula. Nulla vitae metus sagittis mauris commodo euismod. In erat dui, vehicula in consectetur ut, mollis at dui. Vestibulum vulputate est eu tellus egestas ullamcorper. Aenean ut ligula lacinia, cursus est vitae, placerat nulla. Sed suscipit rutrum dolor, vitae feugiat orci eleifend in. Proin sit amet nisl purus. Curabitur eget sem nunc. Suspendisse a mattis libero, in bibendum purus. Pellentesque semper eros tincidunt libero aliquam, eget placerat dui consequat. Suspendisse potenti. Sed sed imperdiet metus, non rutrum tellus. Nunc egestas nec libero sodales interdum.
</p><p>

Quisque ultricies, enim ornare euismod vestibulum, neque velit volutpat magna, eget interdum leo nisl in leo. Cras tempor odio ut magna iaculis, at fermentum nulla semper. Etiam laoreet hendrerit gravida. Sed sit amet luctus nibh, sed sodales neque. Nunc varius fringilla nisl, sodales adipiscing sem gravida sed. Etiam ac suscipit turpis. Sed luctus adipiscing ipsum, et facilisis diam pulvinar eu. Etiam blandit id ante viverra varius. Vestibulum tincidunt nisi at velit tempor facilisis. Aenean bibendum fringilla dolor ac tincidunt. Nam facilisis vestibulum augue ut ultricies. Nam suscipit odio non orci lobortis, vitae porttitor purus ultricies. Aliquam egestas neque at lorem aliquam, ut vestibulum libero viverra.
</p><p>

Donec sed feugiat sapien. Cras vitae porta lorem. Pellentesque in enim eu elit vulputate laoreet. Sed non placerat velit. Mauris luctus est auctor, vestibulum orci a, vulputate nunc. Nunc suscipit, ante sit amet porttitor lacinia, dolor augue consectetur augue, ac auctor dui eros non est. Duis scelerisque eget sapien ac scelerisque. Aliquam et tellus ornare, facilisis sem a, luctus est. Aliquam vitae facilisis est. Ut tempor justo urna. Nam commodo eros nisl, sit amet interdum nunc ultrices vestibulum. Integer ac imperdiet purus, eu sodales massa. Donec in sollicitudin purus. Aenean at cursus nulla.
</p><p>

Integer id eleifend tortor. Maecenas id turpis vel sapien consequat blandit. Pellentesque at facilisis tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tortor purus, sagittis ut faucibus sed, facilisis quis tortor. Aliquam tincidunt mi at ipsum congue varius.
</p>
</div>

＆＃13;

Answer 2

我使用的是一个部分透明且具有WebGL背景的经典网站http://www.taccgl.org/。我没有真正的问题与各种网络浏览器（在Windows上测试自己），目前没有抱怨，但当然IE＆lt; 11和各种移动浏览器只是不支持WebGL。但是，各种设备根本不支持WebGL或者没有为全屏3D画布提供所需性能的问题。所以我发现有必要监视性能并可能禁用WebGL或调整画布大小。为了使3D画布保持较小，它应仅覆盖页面的可见部分，这意味着在滚动和调整大小时，需要调整画布的位置和大小。我认为一个好方法是使用我的开源库（当它没有测试版时），但在这里我当然有偏见。

Webgl背景到一个透明的网站

2 个答案: