为什么 SVG 不能在 Canvas 中正确缩放(它全部像素化且模糊)？ 我做错了什么？
我想要的只是 SVG 图像无论 Canvas 大小如何都保持其纵横比，并且不要让它变得模糊。
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>最佳答案
您的问题不在于 SVG，而在于 Canvas 。
Canvas 的默认大小为 300 × 150。首先运行的是脚本，它创建 Canvas 上下文，即 300 × 150。然后 CSS 出现，并在每个方向将 Canvas 元素缩放到 100% .上下文仍然是 300 × 150。这使得每个像素占用超过 1 个像素区域。您需要确保您的脚本在 CSS 之后运行，或者您需要使用 javascript 来调整 Canvas 大小。
关于javascript - Canvas 中的模糊 svg，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38061836/