canvas绘制图片模糊

一、关于canvas

（1）canvas绘制的是位图，而我们平常用的jpg，png也是位图。

位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度等信息来存储和显示图像。具象一点讲，可以将位图想象成一个巨大的拼图，这个拼图有无数的拼块，每个拼块代表了一个纯色的像素点。理论上，1个位图像素对应着1个物理像素。

（2）canvas的width和height属性

<canvas width="600" height="300" style="width: 300px; height: 150px"></canvas>

• style中的width和height分别代表canvas这个元素在界面上所占据的宽高，即样式上的宽高
• attribute中的width和height则代表canvas实际像素的宽高
• canvas默认的width和height是300 * 150，对其设置了css之后，canvas会根据设置css宽高进行缩放（注意不是裁剪）

二、原因

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

三、解决

（1）在浏览器的 window 对象中有一个 devicePixelRatio 的属性，该属性表示了屏幕的设备像素比，即用几个（通常是2个）像素点宽度来渲染1个像素。

       举例来说，假设 devicePixelRatio 的值为 2 ，一张 100×100 像素大小的图片，在 Retina 屏幕下，会用 2 个像素点的宽度去渲染图片的 1 个像素点，因此该图片在 Retina 屏幕上实际会占据 200×200 像素的空间，相当于图片被放大了一倍，因此图片会变得模糊。

var myCanvas = document.getElementById("my_canvas");
var context = myCanvas.getContext("2d");
var getPixelRatio = function (context) {
    var backingStore = context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio || 1;
    return (window.devicePixelRatio || 1) / backingStore;
};
var ratio = getPixelRatio(context);

myCanvas.style.width = myCanvas.width + 'px';
myCanvas.style.height = myCanvas.height + 'px';
//或者在canvas的父元素上使用缩放，使用css3的 transform:scale(0.5,0.5)即可，意思为缩放到原来的2倍大小，和canvas放大两倍刚好抵消掉。
/*
#parent{

      transform:scale(0.5,0.5);//父元素缩小两倍
      zoom:0.5
   }
*/
 
myCanvas.width = myCanvas.width * ratio;
myCanvas.height = myCanvas.height * ratio;

(2)由于 Canvas 放大后，相应的绘制图片时也要放大，有两种方式：

//第一种：每一个绘制相应的放大
context.font = "36px Georgia"; //一倍屏下18px字体
context.fillStyle = "#999";
context.fillText("我是清晰的文字", 50*ratio, 50*ratio);// 坐标位置乘以像素比

//第二种：直接使用 scale 方法
// 放大倍数
context.scale(ratio, ratio);
 
context.font = "18px Georgia";
context.fillStyle = "#999";
context.fillText("我是清晰的文字", 50, 50);

（3）参考文章

https://www.html.cn/archives/9297

http://www.fly63.com/article/detial/3091

https://segmentfault.com/a/1190000004505090