canvas绘图模糊处理（高分屏下的canvas绘制）

场景

在移动端通过 H5 的 canvas 标签绘制图表的时候，不经过任何处理的图表相比较其他元素看起来会有些模糊。

序

先看下面一组高分屏下的圆，上面是普通 div 元素“绘制”的圆，下面是通过 canvas 绘制的圆。可以看出，下面的圆相比较是模糊的。

为什么会这样？

一台普通屏幕上的像素（逻辑像素），可以当做是正常的像素（css中设置的像素），当画一个100px的元素，他就是一个100px的元素。

但是，在出现了一些高分辨率的屏幕之后，就发生了一些变化。随之也出现了一个属性 devicePixelRatio ，它允许我们去查询设备屏幕的像素比。高分屏下（假设devicePixelRatio为3），在css设置的100px（逻辑像素），实际渲染的是300px的物理像素。

而不管是否为高分屏， canvas 中的单位 1 （逻辑像素），就是 1 物理像素，所以在高分屏下，canvas 绘制的图片看起来就模糊了（可以想象成，一张清晰度正常的普通图片为了布满整个背景被强行放大 n 倍，所以看起来模糊了）。

如何处理？

这个涉及到 canvas 标签的一些特性。即 canvas 元素的大小（宽高）会影响 canvas 画布的内容。

举个栗子：

画一个半径为 50 的圆，画布默认宽高为 300 * 150 ，不设置 canvas 元素宽高的情况下是一个圆；如果设置 canvas