移动端Canvas出现锯齿和模糊

在使用canvas绘图时，发现在移动端、ipad出现锯齿或模糊的情况，这是因为设备像素比（Device pixel ratio）的差异导致的。

解决方法：

1、将canvas的属性：width/height 乘以设备像素比；

2、canvas的css样式：width/height不变；

3、canvas上下文ctx进行设备像素比缩放；

var width = 400,

    height = 200;

var ratio = ('devicePixelRatio' in window)?window.devicePixelRatio:1;

canvas.width = width*ratio;

canvas.height = height*ratio;

canvas.style.width = width + 'px';

canvas.style.height = height + 'px';

var ctx = canvas.getContext('2d')

ctx.scale(ratio,ratio)