设备不支持抗锯齿时设置antialias:true调用getContext是否返回有效上下文？

核心结论 #

你传入antialias: true但设备不支持抗锯齿时，仍然会返回可用的WebGL上下文对象，不会出现返回null或者报错的情况。

具体规则 #

• getContext传入的所有上下文配置都属于偏好请求，而非强制生效条件。浏览器会优先匹配你传入的配置，无法满足时会自动降级到设备支持的配置，不会因为单个非核心参数不支持就终止上下文创建。
• 抗锯齿配置不支持的场景下，浏览器会直接忽略antialias: true的请求，默认用antialias: false的配置完成上下文创建。

验证实际生效配置的方法 #

你可以调用getContextAttributes()方法查看最终生效的上下文参数，示例代码如下：

const gl = canvas.getContext('webgl', {
  antialias: true
})
const realAttrs = gl.getContextAttributes()
// 设备不支持抗锯齿时，这里输出false
console.log(realAttrs.antialias)

补充说明 #

只有当浏览器本身不支持对应版本的WebGL、或者你传入的核心配置（如powerPreference）设备完全无法满足时，getContext才会返回null。

内容的提问来源于stack exchange，提问作者Tom--G