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

在移动端上，使用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);

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