Javascript 响应画布导致缩放模糊

我正在创建一个画布，以确保在任何平台（桌面、移动设备等）上都能轻松导航。我决定使用响应画布来实现这一点。之前我的画布是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>

完整script.js：

我确实回顾了类似的问题，例如：

• （不适用，为非响应画布，仅为静态尺寸）
• （再次不适用，无响应）
• （对用户来说，手机上的内容很模糊，我的是所有设备）

---

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

将您的画布想象成一个图像，…它们实际上起着相同的作用。 想象一下，显示的图像300px 150px适合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像素比例显示的完整窗口大小画布。工作草稿如下：（只要在每次更改屏幕大小时重新运行代码即可）

我不知道你想要达到什么样的效果，但这是消除模糊并占据整个窗口区域的方法。 如果你想缩小画布的尺寸并将其安装到你的容器中，只需保持CSS不变，并给出画布的硬编码大小，如eg 1200x800px……这就是你将得到的：

---

内容的裁剪也是画布大小的结果-当您在画布外绘制某些内容时（例如，在300px画布上从左至右500 px），它将不在画布上；）

如果我的图像位于x/y位置，那么第一个选项（1:1像素比）是否会在调整画布大小时更改图像的位置？我必须避免这样，因为这是罗盘图。（我可以试着测试第二个选项）@芝诺，我不知道你如何计算你的图像的位置——如果你想让它们在画布的大小上可见的话——计算相对于画布大小的位置——它看起来像箭头上的X位置计算得很好——总是在中间。其余的也一样。第二个选项-硬编码尺寸为您提供了更方便（绝对）的定位/尺寸调整，以降低调整尺寸时可能出现的质量损失。您的第二个选项似乎就是我所寻求的！它似乎纠正了我的问题，剩下的唯一问题是鼠标拖动功能

onMouseMove

在调整窗口大小后无法跟踪图像的位置，因此无法拖动。现在正在对此进行一些调试。@Zeno在计算单击位置

var scale_ratio=canvas.width/$iCanvas.width（）时，您需要考虑比例和例如单击事件X位置将是
var mx=parseInt（scale_ratio*e.clientX-$iCanvas.offset（）.left）标记为已回答，谢谢！还有一些工作要做，让这项工作在移动触摸。
#Canvas{
  position: fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
}