html5 Canvas画图3:1像素线条模糊问题
上次我们讲到,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
转载于:https://www.cnblogs.com/zhengyinhui/archive/2012/11/29/2847981.html
html5 Canvas画图3:1像素线条模糊问题相关推荐
- 路径图形html5 Canvas画图2:画线条 -java教程
空话就不多说了,开始... 如果你还不道知Canvas是什么,可以看看上一篇. 在学画画的时候,线条是最基本的了,而线条的接连可以成组任何图形.在Canvas中也是如此. 在开始之前我们先拿出画布和画 ...
- HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅 ...
- php绘图和canvas,html5 canvas画图实例用法汇总
HTML5 canvas画图HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript).不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务.get ...
- html5 在线白板,Html5 canvas画图白板踩坑
最近接手了一个小型的H5,最主要的功能大概就是拍照上传和canvas画板了. 主要是记录一下自己菜到像傻子一样的技术. 1.canvas画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大. 2. ...
- html5 canvas 画图移动端出现锯齿毛边的解决方法
html5 canvas 画图移动端出现锯齿毛边的解决方法 参考文章: (1)html5 canvas 画图移动端出现锯齿毛边的解决方法 (2)https://www.cnblogs.com/dear ...
- HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情
正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...
- php网页画线,HTML5 canvas基本绘图之绘制线条
是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制线条方法,感兴趣的小伙伴们可以参考一下 是HTML5中新增的标签,用于绘制图形,实际上,这个标 ...
- [转]html5 Canvas画图教程(1)—画图的基本常识
今天看到一个讲Canvas的教程,很通俗移动,所以转载了下. 虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascri ...
- html5画图论文结束语,基于HTML5 Canvas画图软件的设计与实现.doc
摘要:在最近十年里,HTML5在Web开发标准完成了巨大的飞跃,和以前的版本相比,HTML5不但用来表示Web的内容,而且还把Web带入一个更高的平台.HTML5为我们带来很多新的特性,其中一个最重要 ...
最新文章
- 汉字内码UNICODE转换表
- [Swift]LeetCode793. 阶乘函数后K个零 | Preimage Size of Factorial Zeroes Function
- ios android 交互 区别,很多人不承认:iOS的返回交互,对比Android就是反人类。
- bilibili go框架_最好的开发语言一定是那位吗?Go语言有话说
- Saltstack常用模块及API
- scss提取 vue_vue 中使用sass实现主体换肤
- 安卓版App开发心得
- Insert Delete GetRandom O(1)
- HashTable源码简单介绍
- 关于 K8S 探针(startupProbe、livenessProbe、readinessProbe)的最佳实践
- 调节汉化版Eclipse的字体大小
- 软件开发流程:软件运维流程
- 马云,你不缺孩子,很多人叫你爸爸
- 第十六篇:关于Unity开发WebGL遇到的坑
- python获取代理服务器地址
- 华迪杯计算机设计大赛省赛奖金,西南财经大学天府学院学子在2019年“华迪杯”中国大学生计算机设计大赛四川省级赛中获佳绩...
- 把一个对象中的属性值赋值到另外一个对象中
- 计算机表格增加,电脑中给Excel表格添加水印效果的方法
- IPO并不遥远,飞哥IPERi模型助你打开互联网创业创新成功密码
- 【HTMLCSS】CSS当中设置背景图片不显示的问题
热门文章
- java 获取下拉框的值_java中怎么获取下拉框的值
- tostring会空指针吗_追了多年的开发框架,你还认识指针吗?
- MATLAB 提取*.m 文件调用的所有函数
- 5开发 时间格式化_2020年,前端开发者必备的10个VS Code扩展插件
- 化学实验中计算机技术的应用,浅谈计算机在基础化学实验中的应用
- java 字符串优化_Java字符串优化
- html5晶格化,前端开发——滚滚屏(没纵向滚动条)
- html怎么直接给服务器发消息,HTML5教程之服务器发送事件
- 从零开始刷Leetcode——数组(643.665.674)
- 基于多搜索引擎和深度学习技术的自动问答