canvas 1px 出现模糊解决方法及原理
关于canvas绘制1像素出现模糊的原因及解决方法
canvas是html5中非常强大的功能,但是在绘制的时候如果出现1像素,例如画一条1像素的线可能出现模糊情况。
一、解决方法
网上比较常见的解决方法是+0.5
cxt.moveTo(x+0.5,y+0.5)
cxt.lineTo(x+0.5, y+0.5)
这样确实可以让线重新变回清晰的状态
因为把绘制线条封装成一个函数,绘制多条线,多次调用该函数,出现有的线是1px,有的线是2px。
所以只有理解了canvas出现模糊的原理才能更彻底的解决
二、canvas绘制原理
canvas每条线都有一条无限细的中线,线由中线两个伸展。
例如:
当起点是2px时,中线在2px的地方,向左延伸0.5px,向右延伸0.5px,所以这条线应该在1.5px到2.5px的地方,但实际上计算机的最小像素是1px,所以canvas会取一个折中的方法,分别再向左右延伸0.5px,颜色变成原来的一半,所以实际效果看起来变成了2px模糊的线条。
三、进一步的解决方法
了解了原理之后,就明白解决问题的根源起点应该在0.5的地方,这也是为什么x,y需要+0.5。当x,y做过计算不一定是整数的时候可能+0.5又出现模糊的情况。所以做一个取整可以保证不会出现模糊的情况
cxt.moveTo(parseInt(x)+0.5, parseInt(y)+0.5)
cxt.lineTo(parseInt(x)+0.5, parseInt(y)+0.5)
本文转载于:canvas 1px 出现模糊解决方法及原理
canvas 1px 出现模糊解决方法及原理的更多相关文章
- echarts移动端字体模糊解决方法
echarts使用canvas画图,在移动端使用rem时候,若viewport的scale被缩放,则字体会发生模糊,本人采用的解决方法是在不同的dpr下使用不同的字体大小,具体代码如下: 获取字体大小 ...
- 高DPI下界面错乱的解决方法和原理
来源: http://bbs.csdn.net/topics/370177760 我在win32 + c写的界面中解决办法,就是把字体的字号给固定了,这样做的结果就是,不管dpi是否有改变,界面中控件 ...
- Android Studio代码字体模糊解决方法
问题描述: 我的电脑分辨率是(1920*1080),然而安装了Android Studio后代码的一些部分区域出现模糊的现象,应该是软件默认设置与高分屏有冲突. 如下图所示. 解决方法: 打开设置对话 ...
- Linux(Manjaro) - IntelliJ IDEA (JetBrains) 字体模糊解决方法
Linux(Manjaro) - IntelliJ IDEA 字体模糊解决方法 解决方法非常简单, 只要安装 JetBrains 提供的 jre 即可 使用 Octopi 或者 pacman 安装名为 ...
- Macbook外接显示器模糊解决方法
解决方法(此方法经本人测试失败) 下载这个http://www.elias.cn/uploads/Mac/patch-edid.zip.如果链接失效可以使用https://gist.github.co ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- hashmap冲突的解决方法以及原理分析:
在Java编程语言中,最基本的结构就是两种,一种是数组,一种是模拟指针(引用),所有的数据结构都可以用这两个基本结构构造,HashMap也一样.当程序试图将多个 key-value 放入 HashMa ...
- wpf软件某些分辨率下文字模糊解决方法
软件测试过程中发现在一台1600*900的分辨率电脑上文字模糊,甚至某些个文字出现压缩扭曲 经过实践,发现按下面方法能解决一点问题: 在窗口或控件上设置字体属性就可以了,如下: <UserCon ...
随机推荐
- Chrome:开发者模式下复制Element下的代码
Element模块下的代码只能一行一行复制,想要复制一个代码块,可以把该代码块先收起来,再对这个收起来的代码块进行复制就OK了
- 列表生成式 生成器 迭代器 yield
列表生成式 格式:通过一个或者若干个在List里边的for构建List而非List外部的for循环 举个例子:计算从1到10整数的平方构成一个List L=[ x*x for x in range(1 ...
- linux-日常工作积累
Linux常用命令之envsubst https://blog.csdn.net/banche163/article/details/101369495 Linux中的EAGAIN含义 https:/ ...
- C#10新特性-全局和隐式usings
.NET 6发布后支持C#10,C# 10 向 C# 语言添加了很多功能,今天我们分享一下全局和隐式usings的使用: using 指令简化了使用命名空间的方式. C# 10 包括一个新的全局 us ...
- WPF优秀组件推荐之Stylet(二)
上一篇文章介绍了Stylet的一些基本功能,本篇将介绍一些深入一点的功能. 依赖注入 在Bootstrapper 类中注入需要的对象: public class Bootstrapper : Boot ...
- xshell + xftp 安装及1603错误解决
xshell + xftpan下载安装 百度网盘下载链接:https://pan.baidu.com/s/14orvEWDjFkrLvr_9JaG4Gw 提取码:om9z 下载地址 https://w ...
- pd.cut和pd.qcut()之间的区别
- 写博客的技巧整理——基于Markdown
我们需要掌握各种技巧,这样才能在写博客时游刃有余,以下内容觉得不错就点个赞吧 文章目录 1.目录与目录跳转 目录一(示例用勿点) 目录二(示例用勿点) 目录三(示例用勿点) 2.文字与图片 3.引用 ...
- Mariadb开启密码复杂度
mariadb开启密码复杂度 #安装插件# INSTALL SONAME 'simple_password_check'; #设置输入错误多少次锁定# set global max_password_ ...
- Django之 CBV和FBV
FBV FBV(function base views) 就是在视图里使用函数处理请求. CBV CBV(class base views) 就是在视图里使用类处理请求. Python是一个面向对象的 ...