webgl - 如何使用高 DPI 设备渲染 WebGL 内容？

Question

设置 WebGL 以呈现高每英寸点数显示器（例如 macbook 视网膜或像素 chromebook）上的所有本机像素的正确方法是什么？

Answer 1

对于 WebGL，它相对简单。

var desiredCSSWidth = 400;
var desiredCSSHeight = 300;
var devicePixelRatio = window.devicePixelRatio || 1;

canvas.width  = desiredCSSWidth  * devicePixelRatio;
canvas.height = desiredCSSHeight * devicePixelRatio;

canvas.style.width  = desiredCSSWidth  + "px";
canvas.style.height = desiredCSSHeight + "px";

见http://www.khronos.org/webgl/wiki/HandlingHighDPI

有符合这些规则的一致性测试。具体来说，不允许浏览器更改 WebGL 画布的画布后备存储的大小。

对于常规的 2D 画布，它不那么简单，但这不是问题所在。