如何避免浏览器缩放改变Canvas尺寸？

Question

我正在构建一个 Three.js 项目。\n在 JS 中，我定义了它renderer.setSize(1920\xef\xbc\x8c600)。\n通过控制台中的命令，renderer.domElement我可以检查渲染器大小。

\n\n

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

\n\n

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

\n\n

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

\n

Answer 1

画布有 2 种尺寸。

1. 他们的绘图缓冲区的大小。

   这是画布中有多少像素。这是由width 和height属性设置的

   <canvas width="123" height="456"></canvas>
   

   或者通过设置width和height属性

   someCanvas.width = 123;
   someCanvas.height = 456;
   

2. 画布显示的尺寸

   这是由 CSS 设置的

   <canvas width="123" height="456" style="width: 789px; height: 987px;"></canvas>
   

   该画布将以 789x987 像素显示 123x456 像素

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

浏览器永远不会改变上面的#1 大小。仅当您将其设置为某个百分比度量时，大小 #2 才会发生变化。如果它发生了变化，那就是你的代码中的某个地方发生了变化。检查一个resize函数

请注意，遗憾的是， Three.jsrenderer.setSize在 JavaScript 中设置了画布的 CSS。如果你不希望它设置 CSS 传递 false 作为最后一个参数，如下所示

renderer.setSize(width, height, false);

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