当绘制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. 干货：yii日志功能详解

    转载请注明来自souldak,微博:@evagle 一.基本日志功能 详细的介绍查看官网的document:http://www.yiiframework.com/doc/guide/1.1/en/t ...

  2. BZOJ 2752 高速公路(road)（线段树）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2752 题意:给出一个数列A,维护两种操作: (1)将区间[L,R]之内的所有数字增加de ...

  3. HDU 4609 3-idiots（FFT）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4609 题意:给出n个正整数(数组A).每次随机选出三个数.问这三个数能组成三角形的概率为多大? 思路: ...

  4. 使用SqlTransaction回滚事务

    https://msdn.microsoft.com/zh-cn/library/system.data.sqlclient.sqltransaction(v=vs.110).aspx private ...

  5. static_cast 和 dynamic_cast 的区别

    static_cast一般用来将枚举类型转换成整型,或者整型转换成浮点型.也可以用来将指向父类的指针转换成指向子类的指针.做这些转换前,你必须确定要转换的数据确实是目标类型的数据,因为static_c ...

  6. CFileDialog使用总结

    http://blog.csdn.net/tianhai110/article/details/2055149 CFileDialog经常用,但经常忘,现归纳整理下,方便今后查询. 例子: CFile ...

  7. radio checked不起作用的原因

    <table id="approveTable"> <tr> <td> <input type="radio" nam ...

  8. 判断客户浏览器是否支持cookie

    function check(){ if(window.navigator.cookieEnabled) return true; else{ alert("浏览器配置错误,Cookie不可 ...

  9. laravel named route

    laravel中一般对于路由的使用方法是在routes.php中定义一个路由,在view中如果要引用一个url则直接通过<a href="url/">来使用. 但是随着 ...

  10. git plumbing 更加底层命令解析-深入理解GIT

    原文: http://rypress.com/tutorials/git/plumbing 本文详细介绍GIT Plumbing--更加底层的git命令,你将会对git在内部是如何管理和呈现一个项目r ...