样板代码 1

此示例描述了重复出现的代码片段，这些代码片段从现在开始将被隐藏，以及定义一个 JavaScript 实用函数以简化 WebGL 初始化。

设置 WebGL 渲染上下文的样板代码

到目前为止，您已经习惯了看到相同的HTML、CSS 和 JavaScript 代码片段一次又一次地重复出现。所以从现在开始，我们将隐藏它们。这样可以让您专注于学习WebGL 最重要的部分，即有趣的代码片段。

具体来说，HTML 包含一个<p> 元素，它包含一些关于页面的描述性文本，并且可能包含错误消息；一个<canvas> 元素；以及可选的<button> 元素。CSS 包含针对 body、canvas 和 button 的规则。任何额外的非平凡的 CSS 和 HTML 将在特定示例的页面上显示。

在接下来的示例中，我们将使用 JavaScript 辅助函数 getRenderingContext() 来初始化WebGL 渲染上下文。到目前为止，您应该能够理解该函数的功能。基本上，它从 canvas 元素中获取 WebGL 渲染上下文，初始化绘图缓冲区，用黑色清空它，并返回初始化的上下文。如果出现错误，它将显示一条错误消息并返回null。

最后，所有 JavaScript 代码将在一个立即函数中运行，这是一种常见的 JavaScript 技术（参见函数）。函数声明和调用也将被隐藏。

HTML

html
<p>[ Some descriptive text about the example. ]</p>
<button>[ Optional button element. ]</button>
<canvas>Your browser does not seem to support HTML canvas.</canvas>

CSS

css
body {
  text-align: center;
}
canvas {
  display: block;
  width: 280px;
  height: 210px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}
button {
  display: block;
  font-size: inherit;
  margin: auto;
  padding: 0.6em;
}

JavaScript

js
function getRenderingContext() {
  const canvas = document.querySelector("canvas");
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  const gl =
    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  if (!gl) {
    const paragraph = document.querySelector("p");
    paragraph.textContent =
      "Failed to get WebGL context. Your browser or device may not support WebGL.";
    return null;
  }
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  return gl;
}

此示例的源代码也可以在GitHub 上找到。