css - 当在 css 中设置 Canvas 大小时，WebGL 损坏了上下文

Question

在 WebGL 页面中，当我用像
这样的好旧方法对 Canvas 大小进行硬编码时
一切看起来都很棒。但是将大小部分移动到 css 会产生非常像素化的图像，因为它以非常小的尺寸渲染然后放大。我想这是因为我在页面加载时初始化了 webgl 上下文，但 css 稍后生效，所以 webgl 认为控件比实际小。无论我的猜测是对还是错，我该如何解决？

Answer 1

在初始化 webgl 上下文之前，我设法使用以下代码解决了这个问题。

canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
this.gl = canvas.getContext("webgl"); 
... 

所以看起来 WebGL 会根据宽度和高度初始化上下文，同时可以说它应该根据客户端尺寸进行初始化。