CSS不能用于设置画布大小？

我不清楚，为什么在这个网站下面的CSS：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。

来源

2015-02-10 Adam Cavender

您必须添加信息。你的HTML和CSS的其余部分在哪里？ – Alex 2015-02-10 20:53:54

您必须使用javascript设置您的画布大小。 CSS不会产生正确的效果。 – Daniel 2015-02-10 20:53:59

这可能会帮助你：http://stackoverflow.com/questions/5034529/size-of-html5-canvas-via-css-versus-element-attributes – blex 2015-02-10 20:55:45

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

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

因此，您的画布将始终呈现在身体的一半高度和宽度。

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

但真的，你应该更新窗口的宽度/高度调整大小，以保持porportions准确。

来源

2015-02-11 20:02:37 thewolff

CSS不能用于设置画布大小？

回答

相关问题