HTML画布在全屏尺寸上变得模糊[重复]答案

【问题标题】：HTML canvas gets blurred on fullscreen size [duplicate]HTML画布在全屏尺寸上变得模糊[重复]
【发布时间】：2018-06-18 08:11:25
【问题描述】：

我想在画布上绘制一些矩形。此画布应具有全屏尺寸。

无需调整画布大小的正确视图：

$(document).ready(() => {
  const canvas = $('#c')[0];
  const ctx = canvas.getContext('2d');
  ctx.lineWidth = 1;

  for (let i = 0; i < 10; i++) {
    const rectHeight = 100;
    const verticalPosition = i * rectHeight + (i + 1) * 10;
    ctx.strokeRect(10, verticalPosition, 200, rectHeight);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c"></canvas>

具有调整大小的画布的视图：

$(document).ready(() => {
  const canvas = $('#c')[0];
  const ctx = canvas.getContext('2d');
  ctx.lineWidth = 1;

  for (let i = 0; i < 10; i++) {
    const rectHeight = 100;
    const verticalPosition = i * rectHeight + (i + 1) * 10;
    ctx.strokeRect(10, verticalPosition, 200, rectHeight);
  }
});

#c {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c"></canvas>

我不希望元素变大。只是画布应该有更大的区域可以绘制。画布上的元素应保持其大小。否则它们会变得模糊。

【问题讨论】：

当窗口加载和调整大小时，您可以使用 JavaScript 以像素为单位设置画布的宽度和高度，而不是缩放。顺便说一句，你不需要 jQuery。
但是如何在所有显示器上获得正确的全屏像素？
window.innerWidth 和 window.innerHeight :)

标签： javascript jquery html css canvas

【解决方案1】：

您可以在 JavaScript 中声明画布 width 和 height。将尺寸设置为窗口的width 和height。

$(document).ready(() => {
  const canvas = $('#c')[0];
  // Set the canvas size
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const ctx = canvas.getContext('2d');
  ctx.lineWidth = 1;

  for (let i = 0; i < 10; i++) {
    const rectHeight = 100;
    const verticalPosition = i * rectHeight + (i + 1) * 10;
    ctx.strokeRect(10, verticalPosition, 200, rectHeight);
  }
});

body {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c"></canvas>

【讨论】：

window.innerWidth 是否有 CSS 等价物？
我认为画布不可能。
@MatthiasHermsen 您似乎误解了这个问题。如果您希望画布数据的内在尺寸与画布的实际尺寸相匹配，则无法使用 CSS 调整元素大小。
我们如何扩展@sol 解决方案来调整窗口大小>？

【解决方案2】：

我遇到了同样的问题，只需将 width 和 height 属性设置为 canvas 元素的 offsetWidth 和 offsetHeight 属性即可解决。画布的内部尺寸是根据width 和height 属性计算的，令人惊讶的是，它们不是通过在 CSS 中设置为 100% 来设置的。所以你的工作代码是：

$(document).ready(() => {
  const canvas = $('#c')[0];
  const ctx = canvas.getContext('2d');
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  ctx.lineWidth = 1;

  for (let i = 0; i < 10; i++) {
    const rectHeight = 100;
    const verticalPosition = i * rectHeight + (i + 1) * 10;
    ctx.strokeRect(10, verticalPosition, 200, rectHeight);
  }
});

#c {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c"></canvas>

祝你有美好的一天。

【讨论】：

【解决方案3】：

我认为这是 CSS 的常见问题。我宁愿用JS：

canvas.width = document.body.clientWidth; 
canvas.height = document.body.clientHeight;

【讨论】：