响应式 Canvas 导致模糊缩放

Question

我正在创建一个 Canvas，我想确保它可以在任何平台（桌面、移动等）上轻松导航。我决定使用响应式 canvas 来完成此操作。在我使用 800x800 的 canvas 之前，它看起来不错（除了没有响应）。 canvas 包括线条和图像文件。我也在使用 Bootstrap.

我取出 width/height 定义并开始测试响应时的外观。它确实做出了反应。然而，一切看起来都放大了并且模糊了，包括图像和线条。即使我缩小我的屏幕。 canvas 的一部分也在屏幕外。

我理解响应意味着它会扩展。但是为什么当屏幕远低于 800x800 时它看起来很模糊，我该如何纠正？

索引文件的相关部分：

...HTML above...
<div class="row">
  <div class="col-xs-1 col-sm-1" id="border">Menu</div>
  <div class="col-xs-11 col-sm-11" id="border">
  
<canvas id="Canvas"></canvas>
  </div>

</div>
<script src="js/script.js" charset="utf-8"></script>
<script>
<?php
 ...some PHP code here inserts images...
}
?>
</script>

CSS 就是：

body{ background-color: ivory; }

#border{
  border: solid 1px black;
}

#Canvas{
  border: solid 1px red;  
  width: 100%;
}

完整 script.js: https://pastebin.com/u63h6VZ8

我确实复习过类似的问题，例如：

HTML Blurry Canvas Images（不适用，是无响应的 canvas，只是静态尺寸）
Canvas drawings, like lines, are blurry（再次不适用，无响应）
Canvas circle looks blurry（仅在 phone 上对用户来说是模糊的，我的是所有设备）

[编辑] 上面的模糊图像是完整的 canvas。第二个是 canvas 的左上角，在我让它响应之前。

Answer 1

将您的 canvas 想象成一个 image ...它们实际上是一样的。假设图像显示为 300px x 150px 以适合 100% 的容器（屏幕）

当容器更大时 -> 放大时图像肯定会模糊
当容器小于图像时 -> 图像会很好地缩小
最佳结果 - 容器确切大小的图像（1:1 像素比）

您的 canvas 实际上没有给定大小，因此浏览器默认创建 canvas 大小 300 x 150px - 这就是为什么你的 canvas 变模糊了 - 因为它正在按比例放大；要更改该大小，您可以在代码的开头编写 .:

// Init the canvas
var canvas=document.getElementById("Canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

并在您的 CSS 中将 canvas 更改为固定位置，如下所示：

#Canvas{
  position: fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

...将为您提供全 window 尺寸 canvas 显示，像素比例为 1:1。工作草案在这里：https://jsfiddle.net/a2hefz0c/（每次更改屏幕大小时只需重新运行代码）

我不知道你想要达到什么样的响应度 - 但这是消除模糊并占据 window 整个区域的方法。如果你想 canvas 缩小并装入你的容器中，只需保持你的 CSS 不变，并给你的 canvas 硬编码大小，例如 1200x800px ...这就是你的重新获得：https://jsfiddle.net/6svk02ph/4/

内容的裁剪也是 canvas 大小的结果 - 当您在 canvas 之外绘制某些东西时（例如，在 300px [=47= 上从左边 500px ]) 它不会出现在 canvas ;)

响应式 Canvas 导致模糊缩放

Responsive Canvas causing blurry scaling

html

javascript

css

html5-canvas