CSS不适用于设置画布大小？答案

【问题标题】：CSS not working with setting canvas size?CSS不适用于设置画布大小？
【发布时间】：2015-02-12 04:02:37
【问题描述】：

我不确定为什么这个 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将画布拉伸到屏幕大小，但是CSS似乎对画布没有影响，所以画布不占用全屏。

我正在使用谷歌浏览器。

可以在here找到下载。

【问题讨论】：

您必须添加信息。你的 HTML 和 CSS 的其余部分在哪里？
您必须使用 javascript 设置画布大小。 CSS 不会产生正确的效果。
这可能对你有帮助：stackoverflow.com/questions/5034529/…
@Daniel 我需要使用 CSS，因为我需要“拉伸”效果，这样我可以获得更快的渲染。
你能添加一个jsfiddle吗？画布不占满屏吗？

标签： javascript html css three.js

【解决方案1】：

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

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

因此您的画布将始终呈现为主体高度和宽度的一半。

此外，画布通过在画布元素本身上放置宽度/高度属性来工作。可以在此处找到使用 !important 的 hacky/不完整工作http://jsfiddle.net/thewolff/3onsp221/2/。

但实际上，您应该在调整窗口大小时更新宽度/高度以保持比例准确。

【讨论】：