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插件解决此问题；（网上的方案，没测试过）