上次我们讲到,canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图:
这样的线条显然不是我们想要的。
这篇文章的目的就是弄清楚里面的原理,以及解决它。
大家都知道屏幕上最小的显示尺寸就是1像素,虽然小于1像素的东西可能显示不出来,但计算机可不管,他会试着画一下。
其实像素终究来说也是一个单位,假如我们把画布放大到足够大,足以看清楚每个像素,会是什么情况呢?大概是这个样子:
每个像素都有起止范围,如图所示,他们的范围从左起,跨过1像素,到右止。
如果我们画1像素线条的时候,遵循像素的起止范围,那么我们肯定能得到一个很标准的细线。如下:
但遗憾的是canvas的线条画法不一样,上一篇文章我们已经说了,canvas的每条线都有一条无限细的“中线”,线条的宽度是从中线向两侧延伸的。如果我们还是从第2个像素点画一条线,那么线条的中线就会靠齐到第2个像素的起点,然后我们开始画了,问题也就来了:Canvas 的线条以中线向两侧延伸,而不是向某一边延伸(比如这里,如果只是往右侧延伸,那么我们的问题就不再是问题了),延伸过后我们的线条实际上是这样的:
此时又有个问题:计算机不允许出现小于1px的图形,所以他做了一个折中的事:把这两个像素都绘制了。
所以,如此一来,本来1px的线条,就成了看起来2px宽的线。
失败的原因找到了:Canvas中的line把中线与像素的起点对齐了,而不是像素的中间点。
那么我们怎么解决这个蛋疼的问题?也许有人已经想到了:既然是因为两个的起点不一样,那我们就把他们的起点变得一样吧!
我们让线条的中线和像素的中间点对齐就行了!
像素的中间点很好找,比如第2像素的中间点,依据图上的解释就是1.5像素的位置,那么x像素的中间点就是(x-0.5)px。
当然,在不很严谨的场合,你使用x+0.5也是可以的。
现在我们在canvas上试试我们的研究结果。
1 ctx.moveTo(100.5,100.5);
2 ctx.lineTo(200.5,100.5);
3 ctx.lineTo(200.5,200.5);
4 ctx.lineTo(100.5,200.5);
5 ctx.lineTo(100.5,100.5);
6 ctx.closePath();
7 ctx.lineWidth = 1;
8 ctx.strokeStyle = 'rgba(255,0,0,0.5)';
9 ctx.stroke();
看起来对了吧?
不过貌似这样一来我们画线的时候就非常纠结,难道每次都去加这个让人郁闷的0.5?当然不是,因为我们大部分时间都是用变量保存值的,就不用给每个值加0.5 了
而且,对于lineWidth>1 的线,我们也不用管它:因为只有线条宽1px的时候,这个问题才最明显。
转自:http://www.cnblogs.com/lixlib/archive/2012/11/27/2790243.html
分享到:
相关推荐
html5 Canvas 画图板,学习使用html5 Canvas ,让你画画更轻松
html5 canvas 画图
1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图。 2.它只能正确渲染它...
接上一篇canvas画线条教程 上次我们讲到,canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图: 这样的线条显然不是我们想要的。 这篇文章的目的就是弄清楚里面的原理,以及解决它。 大家都知道屏幕上...
《HTML5 Canvas核心技术:图形、动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary最新力作。...
HTML5 Canvas核心技术:图形、动画与游戏开发 mobi
NULL 博文链接:https://luanxiyuan.iteye.com/blog/1986529
高清版 HTML5 CANVAS核心技术图形动画与游戏开发(爱飞翔).pdf
html5 canvas 画图练习
玩转html5 的 canvas画图, canvas入门,简单介绍canvas。
canvas 画图板的实现
基瑞编著的《HTML5Canvas核心技术:图形动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary*...
一款挺漂亮的基于html5 canvas绘制随机游动线条动画特效,html5网页线条动画效果。
html5 canvas表示我爱你:玫瑰花动画,非常逼真的玫瑰花,你相信这是用Canvas画出来的吗?不但需要HTML5技术,而且还需要有绘画工底哦,这朵玫瑰花还带有枝叶,非常佩服哦。
html5 canvas酷炫的3D动感线条动画特效
html5 canvas绘制的一款五彩发光线条游走散开动画特效,炫酷彩色线条动画效果。
HTML5 Canvas核心技术:图形、动画与游戏开发 - (美)基瑞(Geary,D.)著
Android下使用Canvas画图,详细参见博客:http://www.cnblogs.com/plokmju/p/android_Canvas.html