当绘制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. Entity Framework学习 - 4.Code First升级数据库

    1.在nuget控制台中执行:Enable-Migrations 2.将出现的configuation.cs文件中的AutomaticMigrationsEnabled属性改为true 3.在nuge ...

  2. 每天一个小算法（Heapsort）

    #include "stdio.h" #include "stdlib.h" #define Num 10 Heap(int arr[],int i,int n ...

  3. python之for学习

    for i in range(100,-1,-1): print "%s\n"%i; import os   path = 'D:\\Test'        for root, ...

  4. check if a linux process is done using bash 检查进程是否在运行

    # cat > check_process_is_end.sh while truedo   sleep 30 # seconds   res=`ps -ef | grep RNAhybrid` ...

  5. [HIHO1299]打折机票（线段树）

    题目链接:http://hihocoder.com/problemset/problem/1299 线段树,按照t为下标去更新v,更新的时候要保留最大的那个. #include <algorit ...

  6. CSS中position:fixed的用法

    我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...

  7. 51nod1586 约数和

    果然我自己写的读入优化naive!...换题目给的读入优化就A了...话说用visual交快了好多啊... const int BufferSize=1<<16; char buffer[ ...

  8. LeetCode Valid Number 有效数字（有限自动机）

    题意:判断一个字符串是否是一个合法的数字,包括正负浮点数和整形. 思路:有限自动机可以做,画个图再写程序就可以解决啦,只是实现起来代码的长短而已. 下面取巧来解决,分情况讨论: (1)整数 (2)浮点 ...

  9. 纵观minecraft 游戏作者的世界观

    minecraft 这款游戏 独特的游戏背景 与 模式 深受我爱 ,游戏的音乐制作方面也是独具一格 但是 整个游戏的风气 充满孤独的色彩 抑郁惆怅的音乐 每当在日出时 响起 ,当你进入生存模式之后 开 ...

  10. 决策树之 CART

    继上篇文章决策树之 ID3 与 C4.5,本文继续讨论另一种二分决策树 Classification And Regression Tree,CART 是 Breiman 等人在 1984 年提出的, ...