温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-02-05 09:35:05 来源:亿速云 阅读:626 作者:小新 栏目:web开发

这篇文章给大家分享的是有关怎么解决html5 canvas 绘制字体、图片与图形模糊问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

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。

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

解决方法
1、动态创建并监视window的onresize事件,根据devicePixelRatio重建canvas。
2、动态调整canvas样式的宽高,同样监视onresize事件。再配合CanvasRenderingContext2D.scale动态缩放绘制内容的比例。
浏览器都没有devicePixelRatio改变的事件,或者dpi改变的事件,如果你知道,请留言。

感谢各位的阅读!关于“怎么解决html5 canvas 绘制字体、图片与图形模糊问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI