Canvas drawImage在高清屏幕下变模糊，解决方案

问题：在使用canvas 绘制图片时，发现图片有些模糊

像这样

但使用img标签是不会出现这个问题的

<img  style={{width: '30px', height: '30px'}} 
src={require('../../../assets/icon/ic_cloud.png')}/>

处理方法：

核心代码如下

  function setupCanvas(canvas) {
   // Get the device pixel ratio, falling back to 1.
   var dpr = window.devicePixelRatio || 1;
   // Get the size of the canvas in CSS pixels.
   var rect = canvas.getBoundingClientRect();
   // Give the canvas pixel dimensions of their CSS
   // size * the device pixel ratio.
   canvas.width = rect.width * dpr;
   canvas.height = rect.height * dpr;
   var ctx = canvas.getContext('2d');
   // Scale all drawing operations by the dpr, so you
   // don't have to worry about the difference.
   ctx.scale(dpr, dpr);
   return ctx;
 }

   canvas = document.getElementById('tutorial');
   canvas.width = 1000;
   canvas.height = 1000;
   
   if (canvas.getContext) {//代表支持canvas
     ctx = setupCanvas(canvas);   //这里是调用封装的处理方法
  }

处理了canvas对象，就完美解决了。

附上:参考文章地址，以下是译文内容

HiDPI屏幕是可爱的，他们使一切看起来更平滑和干净。但它们也给开发者带来了一系列新的挑战。在本文中，我们将了解在HiDPI屏幕上下文中在画布中绘制图像的独特挑战。

devicePixelRatio属性

让我们从头开始。在我们拥有HiDPI屏幕之前，一个像素就是一个像素(如果我们忽略缩放和缩放的话)，你并不需要改变周围的任何东西。如果你设置一些东西是100px宽，这就是它的全部。然后，最初的几款HiDPI手机开始出现在窗口对象上，带有有点神秘的devicePixelRatio属性，可用于媒体查询。这个属性允许我们做的是理解像素值(我们称之为逻辑像素值)在CSS中如何转换为设备在渲染时使用的实际像素数的比率。对于devicePixelRatio为2的iPhone 4S，您将看到100px的逻辑值等于200px的设备值。

这很有趣，但这对我们开发者意味着什么?在早期，我们都开始注意到我们的图像被这些设备放大了。我们在元素的逻辑像素宽度上创建图像，当它们被绘制出来时，它们将被devicePixelRatio放大，它们将变得模糊。

这个问题的实际解决方案是
创建按devicePixelRatio放大的图像，然后使用CSS按相同的比例缩小，
canvas也是如此!