Question

我正在建立一个Three.js项目。在JS中，我定义了renderer.setSize(1920，600)。使用控制台中的renderer.domElement命令，我可以检查渲染器的大小。

在正常的浏览器缩放比例（100％）下，画布的大小为1920 x 600。但如果我将缩放比例更改为150％，那么我的尺寸错误为2880 x 900，宽度和高度乘以150％。

一般来说，如果缩放比率= z，则画布宽度= 1920z，高度= 600z。这不是我想要的！我想要一个1920 x 600的固定尺寸，不受浏览器缩放比率的影响。

奇怪的是，有人能解决这个问题吗？

Answer 1

画布有2种尺寸。

其drawingBuffer的大小。

这是画布中有多少像素。这是由width设置的和height属性
```
<canvas width="123" height="456"></canvas>
```
或者设置width和height属性
```
someCanvas.width = 123;
someCanvas.height = 456;
```
显示画布的大小

这是由CSS
设置的
```
<canvas width="123" height="456" style="width: 789px; height: 987px;"></canvas>
```
该画布将在789x987px显示123x456像素

CSS大小可以设置为任何有效的CSS。例如width: 50%;在这种情况下，浏览器会将画布拉伸到其容器大小的50％。您可以通过查看canvas.clientWidth和canvas.clientHeight或通过调用canvas.getClientBoundingRect()来查找浏览器显示画布i CSS像素的大小。

浏览器永远不会更改上面的＃1大小。仅当您将其设置为某个百分比度量时，大小＃2才会更改。如果它正在改变你的代码中某处发生的事情。检查resize功能

请注意，three.js的renderer.setSize遗憾地为JavaScript设置了画布的CSS。如果您不希望它将CSS传递为false，则将其作为最后一个参数设置为

renderer.setSize(width, height, false);

目前（截至2015-11-29）未记载。

如何避免浏览器的缩放改变画布大小？

1 个答案: