canvas学习-----1px线条模糊问题
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上试试我们的研究结果和对比。
看起来对了吧?
不过貌似这样一来我们画线的时候就非常纠结,难道每次都去加这个让人郁闷的0.5?当然不是,因为我们大部分时间都是用变量保存值的,就不用给每个值加0.5 了
而且,对于lineWidth>1 的线,我们也不用管它:因为只有线条宽1px的时候,这个问题才最明显。
var cvs = document.getElementById("cvs");cvs.width = 300;cvs.height = 500;var ctx = cvs.getContext('2d');ctx.moveTo(30,10);ctx.lineTo(200,10);ctx.lineTo(200,100);ctx.lineTo(30,100);ctx.lineWidth = 1;ctx.strokeStyle = 'red';ctx.closePath();ctx.stroke();ctx.beginPath();ctx.moveTo(30.5,200.5);ctx.lineTo(200.5,200.5);ctx.lineTo(200.5,300.5);ctx.lineTo(30.5,300.5);ctx.lineWidth = 1;ctx.strokeStyle = 'red';ctx.closePath();ctx.stroke();
转载:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A%E9%97%AE%E9%A2%98/
转载于:https://www.cnblogs.com/lolDragon/p/6713696.html
canvas学习-----1px线条模糊问题相关推荐
- html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
- canvas 边界模糊_Canvas绘制线条模糊的解决方案
标签: 前段时间,做一个跨平台app项目,需要绘制分时图和K线图.找了很多开源的js的图表库,包括echarts.highcharts等等,都不是很满意,原因有2: 1.太臃肿,我实际上只要一个分时和 ...
- canvas学习笔记(下篇) -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例(星空/时钟/小球)...
[下篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- canvas学习笔记
canvas学习笔记 canvas API中文网 - Canvas API中文文档首页地图 使用canvas来绘制图形 - Web API 接口参考 | MDN 什么是Canvas? Canvas是H ...
- canvas学习这一片果然就够了(二)
canvas学习这一片果然就够了(二) 文章目录 canvas学习这一片果然就够了(二) 前言 一.实战基本篇 二.开启绘制形状实战 1.栅格 (grid) 和坐标空间 2.绘制矩形 三.绘制路径 ( ...
- canvas学习这一片果然就够了(一)
canvas学习这一片果然就够了(一) 文章目录 canvas学习这一片果然就够了(一) 前言 一.canvas基础篇 一.canvas是神马 二.可以用来干什么 三.浏览器支持情况 四.简单使用 - ...
- Canvas学习笔记 Canvas的基础知识点
文章目录 前言 一.导航 初始化 属性与方法 小demo 二.绘制功能 2.1.绘制矩形 2.1.1.非面向思想实现动画 2.1.2.面向对象思维实现动画 2.2.绘制路径 2.3.绘制圆弧(动态圆形 ...
- Canvas学习系列二:Canvas的坐标系统
上一章内容中我们对canvas元素有了一个初步的认识,在接下来的章节中我们会慢慢学习canvas中图形的绘制:但是在绘制之前我们先来看看canvas中的坐标系统,因为这样我们才能知道绘制的图形放在什么 ...
- HTML5 Canvas 学习日志(三)
2019独角兽企业重金招聘Python工程师标准>>> HTML5 Canvas 学习日志(三) Canvas的11种合成 蓝色为destination,粉色为source 1 ...
最新文章
- Intent七大属性
- jquery jcrop java_jcrop基本参数一览
- JSP、JAVA获取各种路径总结
- pygame从入门到提高(1)
- SVN的安装配置(一)
- TA能让你家的那些“哑”终端都“活”过来
- 荣耀V40渲染图曝光 将搭载双曲面瀑布屏
- 最好用最方便的sqlite管理工具
- Spring boot 通过ApplicationRunner在启动完成后按指定顺序执行任务
- 拓端tecdat|R语言解决最优化运营研究问题-线性优化(LP)问题
- windows最常用的快捷键(windows10 )
- 微信投票python脚本_微信投票python脚本
- 网络安全工程师面试题汇总
- 使用torch.nn.BatchNorm1d出现Tensor for argument #2 ‘weight‘ is on CPU, but expected it to on GPU错误
- ssrf dict MySQL_SSRF之利用dict和gopher吊打Redis
- SyntaxError: Non-UTF-8 code starting with ‘\xb5‘ in file问题如何解决???求助求助!!!
- 用FPGA做一个生日礼物
- c/c++编程日记:纯C实现登录注册和忘记密码功能(附源码)
- PHP环境搭建(非集成)
- thinkphp6对接阿里云短信服务完成定时发送短信功能