在移动端上，使用canvas绘制图片或者是文字等东西都会莫名其妙的产生模糊或者锯齿出现，对于比较讲究的人来说，这是不可容忍的，下面介绍如何解决绘制模糊的问题
这是未经模糊处理前的代码
<div id="parent">
<canvas id="canvas" width="180" heihgt="180"></canvas>
</div>
<script>
//画文字
var canvas=doucument.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.font="12px normal";
ctx.fillStyle="#999";
ctx.fillText("我是不是模糊的",10,20);
</script>
这样画出来的文字，在电脑上看大多没有问题，但是放到移动端一看，就会出现模糊的情况，至于为何会出现模糊，这里不做深究。
下面是解决方案
1 首先设置canvas的宽度和高度是原来的2倍
2 使用ctx.scale(2,2)设置绘制的东西也放大2倍
3 在canvas的父元素上使用缩放，使用css3的 transform:scale(0.5,0.5)即可，意思为缩放到原来的2倍大小，和canvas放大两倍刚好抵消掉。
<style>
#parent{
transform:scale(0.5,0.5);//父元素缩小两倍
zoom:0.5;
}
</style>
<div id="parent">
<canvas id="canvas" width="360" height="360"></canvas> //设置大小为原来的2倍
</div>
//画文字
var canvas=doucument.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.scale(2,2);//绘制也放大两倍
ctx.beginPath();
ctx.font="12px normal";
ctx.fillStyle="#999";
ctx.fillText("我是不是模糊的",10,20);
这样经过三个步骤之后，基本上就可以解决在移动端上模糊的问题了
