html5 canvas绘图模糊总结

 自己总结canvas绘图中遇到图像模糊情况的心得，不足之处欢迎指出，一起探讨。

第一种情况：画线条模糊

原因是canvas的座标是逻辑座标，与物理像素并不对应。

上图表示的是canvas如何将逻辑位置映射到输出设备。如果我们要在横向位置1处画条宽度为1的竖线，那么canvas会以1为中心，映射到1px的后半部分和2px的前半部分。但显示设备不可能显示单位像素的1/2，所以1px和2px都被点亮，这样看起来的线条比预想要宽一倍。解决办法是把位置指定成0.5,这样正好映射到1px。

线条粗细为偶数：

直接使用位置

线条粗细为奇数：

画横线纵座标+0.5，画竖线横座标+0.5

画斜线横座标或纵座标+0.5（或者不加，这里canvas的表现还不清楚）

第二种情况：drawImage画Image对象导致模糊

我发现，使用drawImage方法画Image对象，如果是原尺寸或放大绘制，不会出现模糊情况。如果缩小绘制，则可能出现图像模糊。

注：

1. 缩小分两种情况一是没指定canvas画布大小（非CSS大小），默认300*150小于要画的Image,二是要画的Image比canvas画布大。

2. 并非所有图片缩小画到canvas上后都会感到明显的模糊，主要是图片中的文字部分。

3. 如果缩小时采用整数倍，发现不会模糊。

至于为什么drawImage画到canvas上的图像小于源图时可能出现模糊，还请懂得canvas内部原理的朋友教一下。

解决办法目前有两种：

1.canvas画布大小不小于源图大小。drawImage时不缩小，按原尺寸画。采用CSS方法缩小canvas外观尺寸。

2.缓冲式绘制，先把Image原尺寸画到一个足够大小canvas buffer上，再把buffer上的数据画到前端canvas上，canvas->canvas过程中缩放不会出现模糊。但需要注意的是，我发现Image->canvas的速度要大大快于canvas->canvas的速度。所以也是有代价的。