gpt4 book ai didi

javascript - Canvas 中的模糊 svg

转载 作者:行者123 更新时间:2023-11-27 23:26:56 25 4
gpt4 key购买 nike

为什么 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com