画布上的模糊 svg答案

【问题标题】：Blurry svg in canvas画布上的模糊 svg
【发布时间】：2016-10-29 22:22:51
【问题描述】：

为什么 SVG 在画布中不能正确缩放（全是像素化和模糊的）？我做错了什么？

我想要的只是 SVG 图像，以保持它的纵横比与画布大小无关，并且不会让它变得模糊。

var canvas = document.getElementById("screen"),
  ctx = canvas.getContext("2d");

var img = new Image();
img.src = "http://imgh.us/perso.svg";
img.onload = function() {
  ctx.drawImage(img, 0, 0);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
#screen {
  display: block;
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <title>Game</title>
</head>

<body>
  <canvas id="screen"></canvas>
  <script type="text/javascript" src="js/game.js"></script>
</body>

</html>

【问题讨论】：

你为什么要把它放到画布上？一旦它在画布元素中，它就会被光栅化。它不再是可缩放的 Vector 图形，而是像素。只需将 SVG 元素放入 DOM 本身即可。
我想用画布和 SVG 图像制作游戏。我认为它仍然是 SVG ......我想我必须阅读更多关于画布到底是什么的信息。谢谢你的澄清！
我不是想阻止你。如果您有真正的理由想要在画布中使用 SVG，那么您应该在问题中将其添加为细节。也许看看this answer
我想在画布中使用 SVG，这样它就可以轻松放大以适应任何分辨率。我想这并不像我想象的那么容易。别担心，我不会放弃。还将详细说明我未来的问题。
@newbStudent 对此有何更新？您是否能够使用下面给出的解决方案从 svg 渲染清晰的图像？如果是，您具体做了什么？

标签： javascript css html canvas svg

【解决方案1】：

您的问题不在于 SVG，而在于画布。

画布的默认大小为 300 × 150。首先运行的是脚本，它创建画布上下文，大小为 300 × 150。然后 CSS 出现，并将画布元素在每个方向上缩放为 100% .上下文仍然是 300 × 150。这使得每个像素占据超过 1 个像素的区域。您需要确保您的脚本在 CSS 之后运行，或者您需要使用 javascript 来调整画布的大小。

【讨论】：

感谢您的回答！我将看看如何在 CSS 之后运行 js，或者干脆换一种解决方案。
@newbStudent 如果你的 js 在一个单独的文件中（你应该有），那么只需在脚本元素中添加一个defer="defer" 属性
@newbStudent，解决方案就是设置你的画布width 和height 属性。如果你不设置，css加载后运行脚本不会有任何改变。

【解决方案2】：

我认为你可以将 SVG 放在 div 中，然后模糊 div，这样会得到相同的效果

https://jsfiddle.net/moongod101/q3qh78xd/

【讨论】：

其实我是想避免模糊效果。不过谢谢你的回答！