画布大小和 WebGL

此 WebGL 示例探讨了在浏览器窗口中显示的 CSS 像素中，设置（或不设置）画布大小与其元素大小的效果。

画布大小对使用 WebGL 进行渲染的影响

使用 scissor() 和 clear()，我们可以演示 WebGL 绘图缓冲区如何受画布大小的影响。

第一个画布的大小设置为样式化的 Element 大小，由 CSS 确定。这是通过将画布的 width 和 height 属性分别分配给 clientWidth 和 clientHeight 属性的值来完成的。

相反，第二个画布没有进行此类分配。画布的内部 width 和 height 属性保持默认值，这些值与浏览器窗口中画布 Element 的实际大小不同。

当使用 scissor() 和 clear() 通过指定其位置和大小（以像素为单位）在画布中心绘制正方形时，这种效果非常明显。在第一个画布中，我们得到了预期的结果。在第二个画布中，正方形的形状、大小和位置都不正确。

html
<p>Compare the two canvases.</p>
<canvas>Your browser does not seem to support HTML canvas.</canvas>
<canvas>Your browser does not seem to support HTML canvas.</canvas>
css
body {
  text-align: center;
}
canvas {
  display: inline-block;
  width: 120px;
  height: 80px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}
js
window.addEventListener(
  "load",
  () => {
    const [firstCanvas, secondCanvas] = document.getElementsByTagName("canvas");
    firstCanvas.width = firstCanvas.clientWidth;
    firstCanvas.height = firstCanvas.clientHeight;
    [firstCanvas, secondCanvas].forEach((canvas) => {
      const gl =
        canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
      if (!gl) {
        document.querySelector("p").textContent =
          "Failed. Your browser or device may not support WebGL.";
        return;
      }
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
      gl.enable(gl.SCISSOR_TEST);
      gl.scissor(30, 10, 60, 60);
      gl.clearColor(1.0, 1.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
    });
  },
  false,
);

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