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

【问题标题】：WebGL corrupted context when the canvas size set in css当在 css 中设置画布大小时，WebGL 损坏了上下文
【发布时间】：2013-11-08 05:39:20
【问题描述】：

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

【问题讨论】：

标签： css webgl

【解决方案1】：

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

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

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

【讨论】：

不，它不能在客户端大小上做到这一点。画布的工作原理与图像和视频相同。内容的大小与您要求显示的大小是分开的。 canvas.width 和 canvas.height（或