HTML5 Canvas画线技巧——实现绘制一个像素宽的细线


Posted in HTML / CSS onAugust 02, 2013

正统的HTML5 Canvas中如下代码

复制代码
代码如下:

ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.lineTo(300,100);
ctx.stroke();

运行结果绘制出来的并不是一个像素宽度的线
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
感觉怎么好粗啊,跟常常见到的网页版各种绘制线效果

很不一样,难道HTML5 Canvas就没想到搞好点嘛

其实这个根本原因在于Canvas的绘制不是从中间开始的

而是从0~1,不是从0.5~1 + 0~0.5的绘制方式,所以

导致fade在边缘,看上去线很宽。

解决方法有两个,一个是错位覆盖法,另外一种是中心

平移(0.5,0.5)。实现代码如下:

错位覆盖法我已经包装成一个原始context的函数

复制代码
代码如下:

/**
* <p> draw one pixel line </p>
* @param fromX
* @param formY
* @param toX
* @param toY
* @param backgroundColor - default is white
* @param vertical - boolean
*/
CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundColor, vertical) {
var currentStrokeStyle = this.strokeStyle;
this.beginPath();
this.moveTo(fromX, fromY);
this.lineTo(toX, toY);
this.closePath();
this.lineWidth=2;
this.stroke();
this.beginPath();
if(vertical) {
this.moveTo(fromX+1, fromY);
this.lineTo(toX+1, toY);
} else {
this.moveTo(fromX, fromY+1);
this.lineTo(toX, toY+1);
}
this.closePath();
this.lineWidth=2;
this.strokeStyle=backgroundColor;
this.stroke();
this.strokeStyle = currentStrokeStyle;
};

中心平移法代码如下:
复制代码
代码如下:

ctx.save();
ctx.translate(0.5,0.5);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.lineTo(300,100);
ctx.stroke();
ctx.restore();

要特别注意确保你的所有坐标点是整数,否则HTML5会自动实现边缘反锯齿

又导致你的一个像素直线看上去变粗了。

运行效果:
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
现在效果怎么样,这个就是HTML5 Canvas画线的一个小技巧

觉得不错请顶一下。

HTML / CSS 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
CSS3实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 #HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 #HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 #HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 #HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 #HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 #HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 #HTML / CSS
You might like
用PHP读取RSS feed的代码
2008/08/01 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
基于element-ui的rules中正则表达式
2018/09/04 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
python处理html转义字符的方法详解
2016/07/01 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
自我评价范文
2013/12/22 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
质量管理标语
2014/06/12 职场文书
大学生求职信例文
2014/06/29 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
孙振耀退休感言
2015/08/01 职场文书
优质服务标语口号
2015/12/26 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL