CSS 无法设置 canvas 大小？

Question

我不确定为什么 html 中的以下 css:

<!DOCTYPE html>
<html>
    <head>
        <title>Three.js</title>
        <style>
            body {
                margin: 0;
            }
            canvas {
                display: block;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <script src = "three.js"></script>
        <script src = "script.js"></script>
    </body>
</html>

似乎不影响script.js:

var resolutionDivisor = 2;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth / resolutionDivisor, window.innerHeight / resolutionDivisor);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var render = function () {
    requestAnimationFrame( render );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
};

render();

我试图让 three.js 以屏幕分辨率的一半渲染，以提高渲染速度，并使用 CSS 将 canvas 拉伸到屏幕尺寸，但是CSS好像不影响canvas，所以canvas不占全屏。

我正在使用 Google Chrome.

可以找到下载 here。

Answer 1

问题是您正在设置渲染器大小，如下所示。

renderer.setSize(window.innerWidth / resolutionDivisor, window.innerHeight / resolutionDivisor);

因此您的 canvas 将始终以正文高度和宽度的一半呈现。

此外，canvas 通过在 canvas 元素本身上放置 width/height 属性来工作。可以在此处找到 hacky/incomplete 使用 !important 的解决方法 http://jsfiddle.net/thewolff/3onsp221/2/。

但实际上您应该在 window 调整大小时更新 width/height 以保持比例准确。

CSS 无法设置 canvas 大小？

CSS not working with setting canvas size?

html

javascript

css

three.js