canvas生成图片在手机上模糊

移动端和PC端的分辨率不同，所以导致生成的图片在移动端查看是模糊的；像素点不一样；

解决：

window.devicePixelRatio

Window 属性 devicePixelRatio 能够返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率。此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小的比值。简单地说，这告诉浏览器应该使用多少个屏幕的实际像素来绘制单个 CSS 像素。

原值*比率；最终生成图片盖到canvas上即可解决模糊问题；

canvas可以display:none;

this.devicePixelRatio = window.devicePixelRatio;
var canvas = document.getElementById("poster");
this.ctx = canvas.getContext("2d");
this.ctx.fillStyle = this.themeColor;
this.ctx.fillRect(0, 0, 345*this.devicePixelRatio, 612*this.devicePixelRatio)
var img1 = new Image();
img1.onload = () => {
   this.ctx.drawImage(img1, 0, 0, 345*this.devicePixelRatio, 612*this.devicePixelRatio);
   this.ctx.fillStyle = '#333';
   this.ctx.font = `${13*this.devicePixelRatio}px Arial`;
   this.ctx.textAlign = 'center';
   this.ctx.fillText("xxxxxx", 172.5*this.devicePixelRatio, 133*this.devicePixelRatio);
   this.ctx.fillText("xxxxxx",172.5*this.devicePixelRatio,150*this.devicePixelRatio)
   this.posterImgData = canvas.toDataURL("image/png", 1.0);
}
img1.src = this.posterBg;