当绘制1像素的线条时,发现多条线明显存在着粗细不均的问题,线条带有明显的锯齿.

事实上,Canvas的绘制线条指令都存在这个状况,如lineTo,arcTo,strokeRect.

解决方案是将Canvas平移半个像素即可:

var ctx = document.getElementById("canvas").getContext("2d");

ctx.translate(0.5, 0.5);

这意味着,在绘制线条时,如果Canvas上下文中对应的坐标值为整数,那么绘制的中心点恰好是相邻像素的间隙.

于是很显然,基于这个坐标值进行1px的线条渲染时就占据了间隙两侧的像素点,明明指定了lineWidth的值为1,

渲染出来的结果却是2像素宽.

Canvas 2D绘制抗锯齿的1px线条的更多相关文章

  1. 谢欣伦 - 原创教程 - 使用GDI+绘制抗锯齿斜线

    早些年用过GDI的同学都知道,用GDI绘图API函数画斜线那个锯齿有多恶心.就像下图第一行的三条斜线: 坦白说,45度斜线在抗锯齿以前还是蛮抗锯齿的,哈哈,抗不抗都没什么差别. 那第二行很自然就看得出 ...

  2. 探索canvas画布绘制技术

    图片来自KrzysztofBanaś 下面我们开始尝试研究不同的绘图风格和技术 - 边缘平滑,贝塞尔曲线,墨水和粉笔,笔和印章和图案 -等等.事实证明,网上没有太多关于此的内容.在下面的示例中,您请大 ...

  3. bitmap缩放时抗锯齿

    bitmap在进行放大缩小的时候经常会出现边缘锯齿的情况,通常的解决办法是在Paint中加入抗锯齿, paint.setAntiAlias(true); 但是有时候发现这并没有起到抗锯齿的作用,这是可 ...

  4. canvas学习-----1px线条模糊问题

    canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图: 这样的线条显然不是我们想要的. 这篇文章的目的就是弄清楚里面的原理,以及解决它. 大家都知道屏幕上最小的显示尺寸就是1像素,虽然 ...

  5. html5 Canvas画图3：1px线条模糊问题

    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...

  6. 使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...

  7. Android画图之抗锯齿 paint 和 Canvas 两种方式

    在画图的时候,图片如果旋转或缩放之后,总是会出现那些华丽的锯齿.其实Android自带了解决方式.    方法一:给Paint加上抗锯齿标志.然后将Paint对象作为参数传给canvas的绘制方法. ...

  8. Qt 2D绘图之二：抗锯齿渲染和坐标系统

    一.抗锯齿渲染 1.1 逻辑绘图 图形基元的大小(宽度和高度)始终与其数学模型相对应,下图示意了忽略其渲染时使用的画笔的宽度的样子. 1.2 物理绘图(默认情况) 在默认的情况下,绘制会产生锯齿,并且 ...

  9. Canvas - 时钟绘制

    导语:距离上一次写canvas,已经过去两年半,如今业务需要,再次拾起,随手记录. [思考] 时钟的绘制主要在于圆的绘制:1. 使用context.arc()方法直接绘制圆或圆弧: 2. 使用圆的方程 ...

随机推荐

  1. 面试题目“ABCDE × 4 = EDCBA”新解法

    ABCDE*4=EDCBA 在面试宝典上面看到的一道题目,也是一道老掉牙的题目了,题目详情:一个五位数字ABCDE*4=EDCBA,这五个数字不重复,请编程求出来. 网上流传的代码都是对5位数ABCD ...

  2. 第一个Linux驱动-流水灯【转】

    转自:http://www.xuebuyuan.com/1856562.html 水平有限,描述不当之处请指出,转载请注明出处http://blog.csdn.net/vanbreaker/artic ...

  3. 8.cadence.CIS[原创]

    一.CIS数据库配置 ------ ---------------------------- --------------- ------------------ ---- 二.CIS放置元件 --- ...

  4. js方式进行地理位置的定位api搜集

    新浪 //int.dpool.sina.com.cn/iplookup/iplookup.php?format=js //int.dpool.sina.com.cn/iplookup/iplookup ...

  5. mysql分区（partition）

    1)按范分区(range) partition by range(Year(birthday))( partition p0 values less than 1960, partition p1 v ...

  6. php里的declare用法

    function tick_handler () { echo "tick_handler() called<br>" ; } function tick_handle ...

  7. php的setcookie

    不同浏览器对cookie的原理不同,导致cookie的过期时间有些模糊. 经测试:火狐浏览器的cookie过期时间设置是根据增量原则.服务器端设置time()+num,或者time()-num,传递到 ...

  8. Oracle Exadata体系笔记

    Exadata一开始是以一个存储系统形式诞生的,叫做SAGE(Storage Appliance for Grid Environ ments,网格环境存储设备)   Exadata原本设计用来解决超 ...

  9. python工厂方式创建list

    >>> l = list('sdfsdf') >>> l ['s', 'd', 'f', 's', 'd', 'f']

  10. 内存泄露（OOM）现象及举例

    一.HeapSize OOM(堆空间内存溢出) A.eg:List.add(" ")在一个死循环中不断的调用add却没有remove. B.并发导致. 解决方法有:1.代码提速.这 ...