android canvas防模糊,解决canvas在移动端上绘制模糊的问题

在移动端上，使用canvas绘制图片或者是文字等东西都会莫名其妙的产生模糊或者锯齿出现，对于比较讲究的人来说，这是不可容忍的，下面介绍如何解决绘制模糊的问题

这是未经模糊处理前的代码

//画文字

var canvas=doucument.getElementById("canvas");

var ctx=canvas.getContext("2d");

ctx.beginPath();

ctx.font="12px normal";

ctx.fillStyle="#999";

ctx.fillText("我是不是模糊的",10,20);

这样画出来的文字，在电脑上看大多没有问题，但是放到移动端一看，就会出现模糊的情况，至于为何会出现模糊，这里不做深究。

下面是解决方案

1 首先设置canvas的宽度和高度是原来的2倍

2 使用ctx.scale(2,2)设置绘制的东西也放大2倍

3 在canvas的父元素上使用缩放，使用css3的 transform:scale(0.5,0.5)即可，意思为缩放到原来的2倍大小，和canvas放大两倍刚好抵消掉。

#parent{

transform:scale(0.5,0.5);//父元素缩小两倍

zoom:0.5;

}

  //设置大小为原来的2倍

//画文字

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);

这样经过三个步骤之后，基本上就可以解决在移动端上模糊的问题了