canvas 实现图片局部模糊_canvas图像模糊以及图像变形问题

问题：有时用canvas作图时发现图像会出现模糊不清晰的问题，甚至做出来的图呈现出的效果与我们给的数值所应该呈现出的效果不一致

原因：当你在支持html5 canvas的浏览器下查看页面的时候，canvas画布的默认大小是300*150，相当于一张图片，当在css设置画布大小时比如350*350实际是将原画布(300*150)进行了拉伸，所以会导致图像变形，至于模糊的问题与浏览器处理 canvas 的方式有关

图像变形解决方法：将想要设置的画布大小直接设置在canvas标签上

图像模糊的解决方法：将canvas的绘制过程放大两倍(也可以根据自己需求放大其他倍数，我在项目中放大了四倍才感觉舒服些，根据项目需求)，然后将canvas的父元素缩小两倍(根据绘制过程中放大的倍数确定了，当打几倍父元素就缩小几倍)就可以解决canvas图像模糊问题，

.box{zoom:0.5;}

因为canvas放大了两倍，所以绘制时，参数都要放大两倍(比如半径)，这样就完美的解决了canvas图像模糊的问题