Canvas绘制模糊问题
Canvas绘制模糊问题
·
经过研究,发现屏幕越好的,模糊的感觉越重。
通过测试,产生原因是:屏幕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插件解决此问题;(网上的方案,没测试过)
更多推荐
已为社区贡献1条内容
所有评论(0)