画布上的模糊 svg
Posted
技术标签:
【中文标题】画布上的模糊 svg【英文标题】：Blurry svg in canvas 【发布时间】：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 渲染清晰的图像？如果是，您具体做了什么？ 【参考方案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/
【讨论】：
其实我是想避免模糊效果。不过谢谢你的回答！以上是关于画布上的模糊 svg的主要内容，如果未能解决你的问题，请参考以下文章