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逻辑画布尺寸由您之前调用时设置的pixelRatio缩放

renderer.setPixelRatio( window.devicePixelRatio ).

canvas.style尺寸不变。

这与three.js库的先前版本不同。

three.js r.70

为什么三个js改变我的画布尺寸2x？

1 个答案: