经过研究,发现屏幕越好的,模糊的感觉越重。

通过测试,产生原因是:屏幕dpi的尺度问题导致会模糊。

我们在进行绘制的时候,没有对dpi进行适配。

两个解决方案:

一、改变canvas控件的信息

  • 将canvas的style中的width和height值设置为要显示的大小;

  • 将canvas的width和height的值,根据dpi的倍数进行放大 (此处注意,当你在画布中绘制图片或者文字时,相应数值也需要进行同样的放大)

  • 示例代码:

//解决DPI的绘制模糊问题。绘制之前先调用;
drawDpiBegin(dom,context,width,height) {
context.save();
let scaleValue = window.devicePixelRatio
dom.setAttribute('width', width * scaleValue);
dom.setAttribute('height', height * scaleValue);


dom.style.width = width + 'px'
dom.style.height = height + 'px'
context.scale(scaleValue, scaleValue);
},


//解决DPI的绘制模糊问题。绘制之后再调用;
drawDpiEnd(dom,context) {
context.restore();
},

二、可以引用hidpi-canvas.js插件解决此问题;(网上的方案,没测试过)

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐