如何避免浏览器缩放改变 Canvas 大小？

Question

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

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

一般来说，如果缩放比率 = z，则 canvas width=1920z 和 height=600z 。这不是我想要的！我想要一个固定大小的 1920 x 600，它不受浏览器缩放比例的影响。

奇怪的情况，谁能解决这个问题？

Answer 1

画布有 2 种尺寸。

他们绘图缓冲区的大小。

这是 canvas 中的像素数。这是由 width 和 height 个属性
```
<canvas width="123" height="456"></canvas>
```
或者通过设置 width 和 height 属性
```
someCanvas.width = 123;
someCanvas.height = 456;
```
canvas显示的大小

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

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

浏览器永远不会改变上面#1 的大小。尺寸 #2 仅在您将其设置为某个百分比尺寸时才会更改。如果它正在发生变化，那将在您的代码中某处发生。检查 resize 函数

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

renderer.setSize(width, height, false);

目前（截至 2015 年 11 月 29 日）尚未记录。

如何避免浏览器缩放改变 Canvas 大小？

How to avoid the Zoom of browser changing the Canvas size?

html

javascript

canvas

webgl

three.js