响应式画布导致缩放模糊

如何解决响应式画布导致缩放模糊

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

我取出宽度/高度定义并开始测试它在响应时的外观。它确实反应灵敏。然而，一切看起来都被放大和模糊，包括图像和线条。即使我缩小屏幕尺寸。画布的一部分也在屏幕外。

我理解响应式意味着它会扩展。但是为什么当屏幕甚至远低于 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 drawings,like lines,are blurry（再次不适用，无响应）
Canvas circle looks blurry（对于用户来说只是在手机上模糊，我的是所有设备）

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

解决方法

把你的画布想象成一个图像……它们实际上是一样的。想象一下 300 像素 x 150 像素的图像以适合 100% 的容器（屏幕）

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

您的画布实际上没有给定大小，因此浏览器默认会创建一个300 x 150px大小的画布 - 这就是您的画布变得模糊的原因 - 因为它正在放大;要更改该大小，您可以在代码的开头编写 .:

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

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

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

...将为您提供以 1:1 像素比显示的全窗口大小的画布。工作草案在这里：https://jsfiddle.net/a2hefz0c/（每次更改屏幕大小时只需重新运行代码）

我不知道您想要达到什么样的响应度 - 但这是消除模糊并占据整个窗口区域的方法。如果您想将画布缩小并装入您的容器，只需保持 CSS 原样，并为您的画布提供硬编码大小，例如 1200x800px ...这就是您将得到的：https://jsfiddle.net/6svk02ph/4/>

内容的裁剪也是画布大小的结果 - 当您在画布之外绘制某些内容时（例如，在 300 像素画布上从左侧 500 像素）它不会在画布上；)

响应式画布导致缩放模糊

如何解决响应式画布导致缩放模糊

解决方法

相关推荐