Javascript 画布中的模糊svg

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

我想要的只是SVG图像，无论画布大小如何，都能保持其纵横比，并且不会变得模糊

var canvas=document.getElementById（“屏幕”），
ctx=canvas.getContext（“2d”）；
var img=新图像（）；
img.src=”http://imgh.us/perso.svg";
img.onload=函数（）{
ctx.drawImage（img，0,0）；
}

*{
保证金：0；
填充：0；
框大小：边框框；
}
html，
身体{
宽度：100%；
身高：100%；
}
#屏风{
显示：块；
宽度：100%；
身高：100%；
}

游戏

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

---

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

我认为您可以将SVG放入

div中，然后模糊div，以便获得相同的效果

你为什么要把它放在画布上？一旦它在画布元素中，它就会被光栅化。它不再是可缩放的矢量图形，而是像素。只需将SVG元素放入DOM本身，我想用画布和SVG图像制作一个游戏。我以为它仍然是一个SVG。。。我想我必须读更多关于画布的内容。谢谢你的澄清！我不是想阻止你。如果您确实有理由希望在画布中使用SVG，那么您应该在问题中添加这一细节。也许看一看，我想在画布中使用SVG，这样就可以轻松地放大任何分辨率。我想这并不像我想象的那么容易。别担心，我不会放弃的。还将详细阐述我未来的问题。学生们，这方面有什么更新吗？您是否能够使用下面给出的解决方案从svg渲染清晰的图像？如果是，你到底做了什么？谢谢你的回答！我将了解如何在CSS之后运行js，或者简单地寻找另一种解决方案。@如果js位于单独的文件中（您应该在其中），那么只需向脚本添加一个
defer=“defer”
属性即可element@newbStudent，解决方案就是设置画布的
宽度
和
高度
属性。如果不设置css，在加载css后运行脚本不会改变任何内容。事实上，我想避免模糊效果。但是谢谢你的回答！