[ H5 | canvas ] 图像变形和模糊问题

图像变形：

当你在支持html5 canvas的浏览器下查看页面的时候，canvas画布的默认大小是300*150，当在css设置画布大小时比如300*300实际是将原画布（300*150）进行了拉伸，所以会导致图像变形

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

<canvas  id="canvas" width="300px" height="300px"></canvas>

图像模糊：

解决方法：绘制时，以多倍的大小去布局（根据项目需求），然后将canvas的父元素缩小同样倍数（根据绘制过程中放大的倍数确定了，当打几倍父元素就缩小几倍）就可以解决canvas图像模糊问题。

# 这个例子最终显示的大小还是300*300

<canvas id="canvas" width="600px" height="600px"></canvas>

#canvas{zoom:0.5;}