Question

我正在尝试调整CSS画布的大小，并且目前已使用此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;

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

Answer 1

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

因此，例如，如果您希望画布的宽度动态更新为比当前网页宽度小5像素，则可以执行以下操作：

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>

Answer 2

条件样式是CSS Media Queries的作用。

并且他们不再需要JavaScript：

/* Default styling: */
canvas { 
  border:2px solid red;
  width:calc(100% - 5px);  /* Does exactly what it looks like it does */
  height:200px;
}

/* Conditional style that only kicks in when the viewport is at least 400px wide              */
@media (min-width:400px){
  canvas { height:300px; }  /* Only define what needs to be changed */
}

<canvas></canvas>

Answer 3

对不起，我没有澄清。这是用于确定签名板的大小。弄乱CSS或HTML会使一切变得混乱。大小调整是在带有坐标等的大型Javascript中处理的。

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

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

Javascript-写屏幕宽度屏幕尺寸

3 个答案: