我们在本文中要执行的任务是关于 html5 画布绘图，例如线条看起来模糊。
我们观察到模糊效果，因为不同设备的像素比不同。用于查看画布的浏览器或设备经常会影响图像的模糊程度。
Window 接口的 Pixel Ratio 小工具返回显示设备的物理像素与其 CSS 像素分辨率的比例。这个数字也可以理解为物理与CSS像素的比例，或者一个像素与另一个像素的大小。
让我们深入研究以下示例，以了解有关 HTML5 画布绘制（如线条看起来模糊）的更多信息。
示例 1
在下面的示例中，我们采用模糊的简单文本来使其清晰。
立即学习“前端免费学习笔记（深入）”；
我们正在考虑这张模糊的图像
var canvas = document.getElementById('my tutorial'); var ctx = canvas.getContext('2d'); window.devicePixelRatio=2; var size = 170; canvas.style.width = size + "px"; canvas.style.height = size + "px"; var scale = window.devicePixelRatio; canvas.width = Math.floor(size * scale); canvas.height = Math.floor(size * scale); ctx.scale(scale, scale); ctx.font = '10px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; var x = size / 2; var y = size / 2; var textString = "TUTORIALSPOINT"; ctx.fillText(textString, x, y);
当脚本执行时，它将生成文本输出，我们已经将其作为上面的示例进行考虑，而不会变得模糊。
示例 2
考虑到我们的绘图看起来有点模糊。
div { border: 1px solid black; width: 100px; height: 100px; } canvas, div {background-color: #F5F5F5;} canvas {border: 1px solid white;display: block;} | Line on canvas: | |
运行上述脚本时，会出现输出窗口，在画布上显示一条模糊的线，并在网页上显示 1 像素边框。
以上就是HTML5画布绘制的线条看起来模糊的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1551796.html
微信扫一扫 
支付宝扫一扫 
