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

Question

在WebGL页面中，当我对画布大小进行硬编码时，就像一个很好的旧方式     ＆lt; canvas id =“main-canvas”width =“800px”height =“600px”＆gt; ＆LT; /画布＆GT;
一切看起来都很棒但是将大小部分移动到css会产生非常像素化的图像，因为它以非常小的尺寸渲染然后放大。我想这是因为我在页面加载时初始化webgl上下文但css稍后生效，所以webgl认为控件比实际小。无论我的猜测是对还是错，我该如何解决？

Answer 1

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

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

所以它看起来WebGL根据宽度和高度初始化上下文，而可以说它应该在客户端大小上进行。