Javascript - 写入屏幕宽度屏幕尺寸

Question

我正在尝试调整 CSS Canvas 的大小，目前它由这个 Javascript 控制。

我不是最擅长 Javascript 的:但是有没有办法获取屏幕宽度然后只使用该数据而不是小于和其他。

假设屏幕尺寸为 390x500。我可以不只是获取 screen.width 并从中说 -5 吗？做成那个尺寸？所以 390x500 将是“385”。

        screenwidth = screen.width;

            if (screenwidth < 400) {
                canvas.width = 375;
                canvas.height = 200;
            } else {
                canvas.width = 500;
                canvas.height = 300;
            }

对不起，我没说清楚。这是为了调整签名板的大小。搞乱 CSS 或 HTML 会搞砸一切。大小是在带有坐标等的大型 Javascript 中处理的...

答案是: canvas.width = screen.width - 5;

谢谢，不知道为什么我没有看到那是我应该尝试的。

Answer 1

是的，这是可能的 - 您可能会发现 document.body.clientWidth 对于您在这里尝试做的事情更有用，因为这将为您提供当前文档(网页)的尺寸，而不是比以像素为单位的整个物理显示器的尺寸(即通过 screen)。

因此，例如，如果您希望 Canvas 的宽度动态更新为比当前网页宽度小 5px，您可以这样做:

function updateCanvasSize() {
  
  var canvas = document.body.querySelector('canvas');
  
  // Set canvas width to document width, minus 5
  canvas.width = document.body.clientWidth - 5;
}

// Causes canvas resize to happen when window is resized
window.addEventListener('resize', updateCanvasSize);

// Init canvas size on startup
updateCanvasSize();

canvas {
border:1px solid red;
}

<canvas></canvas>

或者，您可以采用以下纯 CSS 方法来获得相同的结果:

canvas {
  border:1px solid red;
  width:calc(100% - 5px);
}

<canvas></canvas>