canvas生成清晰图片

 绘制模糊

因为 canvas 不是矢量图，而是像图片一样是位图模式的。高dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该 canvas 在 Retina 屏幕下相当于占据了2倍的空间，相当于图片被放大了一倍，因此绘制出来的图片文字等会变模糊。 因此，要做 Retina 屏适配，关键是知道当前屏幕的设备像素比，然后将 canvas 放大到该设备像素比来绘制，然后将 canvas用css设置为屏幕的大小来展示。

解决思路： 在浏览器的 window 对象中有一个 devicePixelRatio 的属性，该属性表示了屏幕的设备像素比，即用几个像素点宽度来渲染1个像素。

类似的，在 canvas context 中也存在一个 backingStorePixelRatio 的属性，该属性的值决定了浏览器在渲染canvas之前会用几个像素来来存储画布信息。 backingStorePixelRatio 属性在各浏览器厂商的获取方式不一样，所以需要加上浏览器前缀来实现兼容。

这里是引用来源

代码实现：

 let devRatio = window.devicePixelRatio || 1, // 获取设备像素比 // ctx的像素比 backingStore = ctx.backingStorePixelRatio ||
        ctx.webkitBackingStorePixelRatio ||
        ctx.mozBackingStorePixelRatio ||
        ctx.msBackingStorePixelRatio ||
        ctx.oBackingStorePixelRatio ||
        ctx.backingStorePixelRatio || 1; const ratio = devRatio / backingStore; // canvas放大像素比倍 $JPoster.setAttribute('width', winW * ratio);  
    $JPoster.setAttribute('height', winH * ratio); // canvas 放大后，相应的绘制图片也要放大 ctx.scale(ratio, ratio);