关于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 出现模糊解决方法及原理的更多相关文章

  1. echarts移动端字体模糊解决方法

    echarts使用canvas画图,在移动端使用rem时候,若viewport的scale被缩放,则字体会发生模糊,本人采用的解决方法是在不同的dpr下使用不同的字体大小,具体代码如下: 获取字体大小 ...

  2. 高DPI下界面错乱的解决方法和原理

    来源: http://bbs.csdn.net/topics/370177760 我在win32 + c写的界面中解决办法,就是把字体的字号给固定了,这样做的结果就是,不管dpi是否有改变,界面中控件 ...

  3. Android Studio代码字体模糊解决方法

    问题描述: 我的电脑分辨率是(1920*1080),然而安装了Android Studio后代码的一些部分区域出现模糊的现象,应该是软件默认设置与高分屏有冲突. 如下图所示. 解决方法: 打开设置对话 ...

  4. Linux(Manjaro) - IntelliJ IDEA (JetBrains) 字体模糊解决方法

    Linux(Manjaro) - IntelliJ IDEA 字体模糊解决方法 解决方法非常简单, 只要安装 JetBrains 提供的 jre 即可 使用 Octopi 或者 pacman 安装名为 ...

  5. Macbook外接显示器模糊解决方法

    解决方法(此方法经本人测试失败) 下载这个http://www.elias.cn/uploads/Mac/patch-edid.zip.如果链接失效可以使用https://gist.github.co ...

  6. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  7. 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  8. hashmap冲突的解决方法以及原理分析:

    在Java编程语言中,最基本的结构就是两种,一种是数组,一种是模拟指针(引用),所有的数据结构都可以用这两个基本结构构造,HashMap也一样.当程序试图将多个 key-value 放入 HashMa ...

  9. wpf软件某些分辨率下文字模糊解决方法

    软件测试过程中发现在一台1600*900的分辨率电脑上文字模糊,甚至某些个文字出现压缩扭曲 经过实践,发现按下面方法能解决一点问题: 在窗口或控件上设置字体属性就可以了,如下: <UserCon ...

随机推荐

  1. Chrome:开发者模式下复制Element下的代码

    Element模块下的代码只能一行一行复制,想要复制一个代码块,可以把该代码块先收起来,再对这个收起来的代码块进行复制就OK了

  2. 列表生成式 生成器 迭代器 yield

    列表生成式 格式:通过一个或者若干个在List里边的for构建List而非List外部的for循环 举个例子:计算从1到10整数的平方构成一个List L=[ x*x for x in range(1 ...

  3. linux-日常工作积累

    Linux常用命令之envsubst https://blog.csdn.net/banche163/article/details/101369495 Linux中的EAGAIN含义 https:/ ...

  4. C#10新特性-全局和隐式usings

    .NET 6发布后支持C#10,C# 10 向 C# 语言添加了很多功能,今天我们分享一下全局和隐式usings的使用: using 指令简化了使用命名空间的方式. C# 10 包括一个新的全局 us ...

  5. WPF优秀组件推荐之Stylet(二)

    上一篇文章介绍了Stylet的一些基本功能,本篇将介绍一些深入一点的功能. 依赖注入 在Bootstrapper 类中注入需要的对象: public class Bootstrapper : Boot ...

  6. xshell + xftp 安装及1603错误解决

    xshell + xftpan下载安装 百度网盘下载链接:https://pan.baidu.com/s/14orvEWDjFkrLvr_9JaG4Gw 提取码:om9z 下载地址 https://w ...

  7. pd.cut和pd.qcut()之间的区别

  8. 写博客的技巧整理——基于Markdown

    我们需要掌握各种技巧,这样才能在写博客时游刃有余,以下内容觉得不错就点个赞吧 文章目录 1.目录与目录跳转 目录一(示例用勿点) 目录二(示例用勿点) 目录三(示例用勿点) 2.文字与图片 3.引用 ...

  9. Mariadb开启密码复杂度

    mariadb开启密码复杂度 #安装插件# INSTALL SONAME 'simple_password_check'; #设置输入错误多少次锁定# set global max_password_ ...

  10. Django之 CBV和FBV

    FBV FBV(function base views) 就是在视图里使用函数处理请求. CBV CBV(class base views) 就是在视图里使用类处理请求. Python是一个面向对象的 ...