Javascript 画布上的图像与html中的图像看起来不同<；img>；标签

我正在尝试使用HTML画布裁剪图像。但即使在裁剪图像之前，当我在画布上渲染图像时，图像看起来也很模糊。然后，我使用HTML标记呈现了相同的图像，图像并不模糊。我对画布和img标记使用了300px的宽度和高度。我似乎无法找出为什么画布上的图像看起来模糊

const img = document.querySelector(".my-image");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, canvas.width, canvas.height);

图像标记上呈现的图像如下所示：

画布上呈现的图像如下所示：

---

如果我看一下您共享的两张图像，这两张图像似乎是600x600px

• 在第一种情况下，使用

  img

  标记，图像显示为600x600px
• 在第二种情况下，使用

  canvas

  方法，以300x300px的速度裁剪图像，但页面通过以600x600px的速度拉伸图像来显示结果，这似乎会产生这种模糊效果

---

您正在缩放图像。您应该将画布大小设置为与图像大小匹配。例如

canvas.width=img.naturalWidth之前
ctx.drawImage
对高度执行相同操作。