HTML 画布分辨率差

编程问答 2022-05-25

问题描述

我正在开发一个需要在浏览器中绘制形状和文本的图形应用程序。我的决定是使用画布，后来我发现在画布中绘制的形状分辨率非常低。现在我正在比较 svg 和 canvas，我发现输出质量有显着差异。这是测试html

<html>
  <body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
    <br/><br/>
    <svg width="200" height="100" style="border:1px solid #000000;">
        <circle cx="95" cy="50" r="40" stroke="black" stroke-width="1" fill="none"/>
        <line x1="0" y1="0" x2="50" y2="50" style="stroke:rgb(0,0);stroke-width:2" />
        <text x="10" y="50" fill="black" font-size="30px">Hello World</text>
      </svg> 
    <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.font = "30px Arial";
        ctx.fillText("Hello World",10,50);
        ctx.linewidth = 1;
        ctx.beginPath();
        ctx.arc(95,50,40,2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.linewidth = 2;
        ctx.moveto(0,0);
        ctx.lineto(50,50);
        ctx.stroke();
    </script> 
  </body>
</html>

这是输出

enter image description here

您可以清楚地看到差异。有没有办法修复画布以输出更好的质量。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

canvashtmlhtml5-canvasjavascriptsvgsvgsvg