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 相关文章推荐
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 HTML / CSS
HTTP中的Content-type详解
Jan 18 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性能优化准备篇图解PEAR安装
2011/12/05 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
php微信公众号开发之简答题
2018/10/20 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python连接oracle数据库实例
2014/10/17 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
5款实用的python 工具推荐
2020/10/13 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
《改造我们的学习》心得体会
2014/11/07 职场文书
门卫管理制度范本
2015/08/05 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL