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实现的windows8开机加载动画
Dec 09 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 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
ftp类(myftp.php)
2006/10/09 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
限制复选框的最大可选数
2006/07/01 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
JS实现炫酷轮播图
2020/11/15 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
python多进程实现进程间通信实例
2017/11/24 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
python函数与方法的区别总结
2019/06/23 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
python实现图片上添加图片
2019/11/26 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
python re的findall和finditer的区别详解
2020/11/15 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
自荐信范文
2013/12/10 职场文书
《口技》教学反思
2014/02/21 职场文书