为什么 threejs 将我的 canvas 大小更改为 2 倍？

Question

#designer {
        height: 480px;
        width: 640px;
    }
var designer = document.getElementById('designer');

var renderer = new THREE.WebGLRenderer({alpha: true,preserveDrawingBuffer: true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(designer.clientWidth, designer.clientHeight);
    designer.appendChild(renderer.domElement);

浏览器显示如下 html 代码：

 <canvas width="1280" height="960" style="width: 640px; height: 480px;"></canvas>

为什么？

Answer 1

在three.js r.70中，调用方法时

renderer.setSize( width, height );

renderer.domElement 逻辑 canvas 维度按您先前在调用

时设置的 pixelRatio 缩放

renderer.setPixelRatio( window.devicePixelRatio ).

canvas.style 尺寸不变。

这与 three.js 库的早期版本不同。

three.js r.70

为什么 threejs 将我的 canvas 大小更改为 2 倍？

why threejs change my canvas size 2x?

three.js