首页 web前端 html教程 如何解决html5 canvas 绘制字体、图片与图形模糊问题

如何解决html5 canvas 绘制字体、图片与图形模糊问题

May 11, 2018 pm 02:49 PM
canvas h5 html5

html5 canvas 绘制字体、图片与图形模糊问题

发生情况

多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑。当然很多高端台式电脑也有高分辨率高dpi的显示器。

 canvas在浏览器中的缩放原理

如果没有设置style那么就以html的属性width,height作为尺寸。

如果设置了style中的width、height,那么以其style设置为最终绘制到浏览器的尺寸。

也就是说,属性中的宽高并不代表实际宽高,所以高dpi下会放大canvas,导致模糊。

canvas的width、height属性是canvas的后缓冲尺寸,绘制到浏览器后会根据当前dpi进行缩放。

devicePixelRatio(window成员)保存了在高dpi状态下属性width/height被放大的比例。

 错误的解决案例

网上搜索canvas 模糊,会有两种解决方法,可能现在都不适合了。

一个是CanvasRenderingContext2D.translate(0.5,0.5);

  这个其实是在3D绘图领域常用的,用于处理像素偏移,canvas的2d context已经处理了这方面的问题。

另一个是backingStorePixelRatio,你会看到类似下面这样的代码,这个backingStorePixelRatio已经在新浏览器中被去掉了,我试过chrome与edge都已经不存在了。

var ctx = document.createElement("canvas").getContext("2d"),
        dpr = window.devicePixelRatio || 1,
        bsr = ctx.webkitBackingStorePixelRatio ||
              ctx.mozBackingStorePixelRatio ||
              ctx.msBackingStorePixelRatio ||
              ctx.oBackingStorePixelRatio ||
              ctx.backingStorePixelRatio || 1
登录后复制

我在研究时用了动态创建canvas的方法,样式的width/height乘以缩放比devicePixelRatio得到canvas的属性width/height。<br/>

  这不是完美的解决方案,因为在浏览器的dpi发生变化时,比如用户设置,或者从一个高dpi显示器移动窗口到低dpi显示器时发生。(我1080p普通23寸显示器是1.25倍,平板电脑是2.0倍,之间拖放窗口就会发生)

<code><span style="font-size: 14px"><strong><span style="font-family: Microsoft YaHei">解决方法</span></strong></span><br/><span style="font-family: Microsoft YaHei; font-size: 14px">1、动态创建并监视window的onresize事件,根据<span style="font-family: Consolas">devicePixelRatio</span>重建canvas。<br/>2、动态调整canvas样式的宽高,同样监视onresize事件。再配合<span style="font-family: Microsoft YaHei">CanvasRenderingContext2D.scale动态缩放绘制内容的比例。</span><br/></span><span style="font-family: Microsoft YaHei; font-size: 14px">浏览器都没有devicePixelRatio改变的事件,或者dpi改变的事件,如果你知道,请留言。</span><br/></code>
登录后复制

以上是如何解决html5 canvas 绘制字体、图片与图形模糊问题的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

HTML 中的嵌套表

HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 中的表格边框

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

在 HTML 中移动文本

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符

See all articles