如何解决HTML 画布分辨率差
我正在开发一个需要在浏览器中绘制形状和文本的图形应用程序。我的决定是使用画布，后来我发现在画布中绘制的形状分辨率非常低。现在我正在比较 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>
这是输出
您可以清楚地看到差异。有没有办法修复画布以输出更好的质量。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
