html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因


Posted in HTML / CSS onJanuary 09, 2013

接上一篇canvas画线条教程
上次我们讲到,canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图:
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因 
这样的线条显然不是我们想要的。
这篇文章的目的就是弄清楚里面的原理,以及解决它。
大家都知道屏幕上最小的显示尺寸就是1像素,虽然小于1像素的东西可能显示不出来,但计算机可不管,他会试着画一下。
其实像素终究来说也是一个单位,假如我们把画布放大到足够大,足以看清楚每个像素,会是什么情况呢?大概是这个样子:

html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因


每个像素都有起止范围,如图所示,他们的范围从左起,跨过1像素,到右止。
如果我们画1像素线条的时候,遵循像素的起止范围,那么我们肯定能得到一个很标准的细线。如下:

html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因


但遗憾的是canvas的线条画法不一样,上一篇文章我们已经说了,canvas的每条线都有一条无限细的“中线”,线条的宽度是从中线向两侧延伸的。如果我们还是从第2个像素点画一条线,那么线条的中线就会靠齐到第2个像素的起点,然后我们开始画了,问题也就来了:Canvas 的线条以中线向两侧延伸,而不是向某一边延伸(比如这里,如果只是往右侧延伸,那么我们的问题就不再是问题了),延伸过后我们的线条实际上是这样的:

html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因


此时又有个问题:计算机不允许出现小于1px的图形,所以他做了一个折中的事:把这两个像素都绘制了。
所以,如此一来,本来1px的线条,就成了看起来2px宽的线条。
失败的原因找到了:Canvas中的line把中线与像素的起点对齐了,而不是像素的中间点。
那么我们怎么解决这个蛋疼的问题?也许有人已经想到了:既然是因为两个的起点不一样,那我们就把他们的起点变得一样吧!
我们让线条的中线和像素的中间点对齐就行了!
像素的中间点很好找,比如第2像素的中间点,依据图上的解释就是1.5像素的位置,那么x像素的中间点就是(x-0.5)px。
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
 
当然,在不很严谨的场合,你使用x+0.5也是可以的。
现在我们在canvas上试试我们的研究结果。
复制代码
代码如下:

ctx.moveTo(100.5,100.5);
ctx.lineTo(200.5,100.5);
ctx.lineTo(200.5,200.5);
ctx.lineTo(100.5,200.5);
ctx.lineTo(100.5,100.5);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
ctx.stroke();

html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因


看起来对了吧?
不过貌似这样一来我们画线的时候就非常纠结,难道每次都去加这个让人郁闷的0.5?当然不是,因为我们大部分时间都是用变量保存值的,就不用给每个值加0.5 了
而且,对于lineWidth>1 的线,我们也不用管它:因为只有线条宽1px的时候,这个问题才最明显。
HTML / CSS 相关文章推荐
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 #HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 #HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 #HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 #HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 #HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 #HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 #HTML / CSS
You might like
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
Chrome Web App开发小结
2014/09/04 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
javascript new后的constructor属性
2010/08/05 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
vue二级路由设置方法
2018/02/09 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Django model反向关联名称的方法
2018/12/15 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
python实现快递价格查询系统
2020/03/03 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
高三自我鉴定
2013/10/23 职场文书
个性大学生自我评价
2013/12/04 职场文书
应届大学生自荐书
2014/06/17 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android