为什么我的 svg 图像在 HTML 画布中模糊不清 [重复]答案

【问题标题】：Why my svg image is bleary in HTML canvas [duplicate]为什么我的 svg 图像在 HTML 画布中模糊不清 [重复]
【发布时间】：2021-03-20 14:28:49
【问题描述】：

我使用的是 SVG 文件，所以我的图像应该非常清晰。我从互联网上复制了这段代码，它工作正常。但结果是模糊的？我也使用了本地 svg 文件，但结果并不清晰。 '''

<!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Slider</title>
        <link rel="stylesheet" href="./css/style.css"  >
        <style media="screen"></style>
        </head>
        <body>
            <canvas id="Slider"  ></canvas> 
         <script>
               var can = document.getElementById('Slider');
               var ctx = can.getContext('2d');
               var img = new Image();
               img.onload = function() {
               ctx.drawImage(img, 0, 0);
               }
               img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";
       
          </script>
          </body>
          </html>

'''

【问题讨论】：

标签： javascript html svg

【解决方案1】：

是的，SVG 本身应该是清晰的，但是您将它绘制到画布上。然后画布可能会按比例放大，导致其上绘制的 svg 模糊。

这已经在这里得到了更好的回答：Blurry svg in canvas

【讨论】：