Canvas 大小对 WebGL 渲染的影响
通过 scissor() 和 clear()，我们可以演示 WebGL 绘图缓冲区如何受到 canvas 大小的影响。
第一个 canvas 的大小设置为由 CSS 决定的样式化 Element 大小。这是通过分别将 canvas 的 width 和 height 属性赋值给 clientWidth 和 clientHeight 属性的值来实现的。
相比之下，第二个 canvas 没有进行此类赋值。canvas 的内部 width 和 height 属性保持默认值，这与浏览器窗口中 canvas Element 的实际大小不同。
通过指定像素位置和大小，使用 scissor() 和 clear() 在 canvas 中心绘制一个正方形时，效果清晰可见。在第一个 canvas 中，我们得到了期望的结果。在第二个 canvas 中，正方形的形状、大小和位置都不正确。
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
const [firstCanvas, secondCanvas] = document.getElementsByTagName("canvas");
firstCanvas.width = firstCanvas.clientWidth;
firstCanvas.height = firstCanvas.clientHeight;
[firstCanvas, secondCanvas].forEach((canvas) => {
const gl = canvas.getContext("webgl");
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);
});
此示例的源代码也可在 GitHub 上找到。