解决html5 canvas 绘制字体、图片与图形模糊问题
2017-09-20 14:14
801 查看
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都已经不存在了。
这不是完美的解决方案,因为在浏览器的dpi发生变化时,比如用户设置,或者从一个高dpi显示器移动窗口到低dpi显示器时发生。(我1080p普通23寸显示器是1.25倍,平板电脑是2.0倍,之间拖放窗口就会发生)
发生情况
多出现在高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绘制不出来图片的问题
- 解决Html5用canvas绘制不出来图片的问题
- canvas 使绘制的图片在div 居中显示 ,解决绘图模糊问题
- html5 canvas绘制图片模糊的问题
- html5 canvas绘制图片模糊的问题
- Canvas 在高清屏下绘制图片变模糊的解决方法
- openLayers 4 canvas图例绘制,canvas循环添加图片,解决图片闪烁问题
- vue中使用html2canvas及解决html2canvas截屏图片模糊问题
- html5之canvas标签应用之 2d图形绘制以及图片绘制
- 使用asciiflow绘制文本图形,解决文本文档中无法嵌入图片问题
- 解决CATextLayer绘制出来的字体模糊问题
- Canvas-drawImage 绘制图片模糊问题
- HTML5使用canvas画图时,图片被自动放大模糊的问题
- Canvas 在高清屏下绘制图片变模糊的解决方法
- HTML5移动开发(6)——Canvas图形绘制基础
- HTML5利用Canvas绘制图形(使用图像、裁剪区域、使用文本。阴影效果和操作像素)
- js+html5实现canvas绘制镂空字体文本的方法
- cocos2d-x如何解决图片显示模糊问题
- 使用 HTML5 canvas 绘制精美的图形
- html2canvas截图如何解决图片跨域的问题?