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的速度。所以也是有代价的。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值