如何缩放 HTML5 画布而不使其模糊？答案

【问题标题】：How can I scale the HTML5 canvas without making it blurry?如何缩放 HTML5 画布而不使其模糊？
【发布时间】：2017-01-10 01:53:41
【问题描述】：

我使用以下标记创建了一个画布：

<canvas id="canvas"></canvas>

现在，如果我在这里直接指定width 和height，那么画布上的绘图会非常清晰。

<canvas id="canvas" width="600px" height="400px"></canvas>

但是这样我就不能灵活地缩放画布来覆盖每个屏幕尺寸。使用vh 或vw 代替像素也不起作用。我尝试在 JavaScript 中设置它们，例如：

$('#canvas').css({
   "height": window.innerHeight,
   "width": window.innerWidth
 });

这覆盖了整个画布，但使线条模糊。有什么方法可以在画布仍然覆盖整个屏幕的情况下获得清晰的图像？

我尝试使用：

$("#canvas")
.prop("width", window.innerWidth)
.prop("height", window.innerHeight);

但是画布上的对象（例如我画的一个圆圈）仍然是模糊的。当我打开 devTools 时，我看到以下标记：

<canvas id="canvas" style="height: 768px; width: 1366px;"></canvas>

所以，我猜宽度和高度仍然由 CSS 定义。

【问题讨论】：

@Kaiido 我已经更新了我的问题。我尝试了您链接到的解决方案，但仍然得到模糊的数字。
如果您使用 CSS 调整画布大小，您必须使生成的画布大小与画布元素的原始大小保持相同的纵横比。否则你会得到失真（模糊、拉伸、挤压等）。保持纵横比意味着您可能无法覆盖窗口区域的每个像素，因为窗口的纵横比可能与原始画布不同。

【解决方案1】：

canvas 元素大小由其属性width 和height 控制。要更改大小，您需要修改这些属性，而不是 CSS。而且它们不需要单位，它们以像素为单位。
```
<canvas id="canvas" width="600" height="400"></canvas>
```
Canvas 绘制位图，它不像矢量那样可缩放。您只能在调整大小后重新绘制画布。

【讨论】：

您的 (2) 是一个常见的误解。 :-) Canvas 以矢量计算（就像 SVG），它显示为准位图（就像 SVG）。不同之处在于 SVG “记住”了它所绘制的内容，因此它可以自动重新调整其绘图的比例。 Canvas 不会“记住”它绘制的内容，因此它无法自动重新调整其绘图的比例。调整画布元素的大小会自动擦除所有绘图，因此您必须重新绘制绘图。 Canvas 的“矢量”计算让您可以通过一个简单的命令重新调整重新绘制的比例：context.scale。 ;-)
@markE 我不知道context.scale 的事情。看来我应该重温一些学习材料:)

【解决方案2】：

Canvas CSS 属性不会调整画布大小，它们会重新缩放它。
您可以简单地使用您的 JS 更改属性：

$("#canvas")
    .prop("width", window.innerWidth)
    .prop("height", window.innerHeight);

【讨论】：

【解决方案3】：

尝试：

var canvas = document.getElementById('canvas');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

【讨论】：