canvas图片模糊文件解决方法

window.devicePixelRatio 可浏览器放大或缩小的倍数  确保来放大缩小画布的宽高

<canvas id="mainCanvas"  :width="canvasWidth" :height="canvasHeight" :style="{ width: width + 'px', height: height + 'px' }" ></canvas>
//注意  画布样式中设置的是 在页面中显示的宽高   而画布中设置的width 和 height 是设置画布的宽高不会影响 样式的宽高

this.dpr = window.devicePixelRatio;

this.canvasWidth = this.width * this.dpr;

this.canvasHeight = this.height * this.dpr;