解决canvas在高清屏中绘制模糊的问题

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

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

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

1.首先一样，获取 Canvas 对象：
JavaScript 代码:

var myCanvas = document.getElementById(“my_canvas”);
var context = myCanvas.getContext(“2d”);

2.获取像素比，将 Canvas 宽高进行放大，放大比例为：devicePixelRatio / webkitBackingStorePixelRatio , 我们写了一个兼容的方法。
JavaScript 代码:

var getPixelRatio = function (context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||