HTML5 Canvas中实现绘制一个像素宽的细线
来源:互联网 发布:stata面板数据ols回归 编辑:程序博客网 时间:2024/06/04 18:38
正统的HTML5 Canvas中如下代码
ctx.lineWidth = 1;ctx.beginPath();ctx.moveTo(10, 100);ctx.lineTo(300,100);ctx.stroke();运行结果绘制出来的并不是一个像素宽度的线
感觉怎么好粗啊,跟常常见到的网页版各种绘制线效果
很不一样,难道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中实现绘制一个像素宽的细线
- 【实例】html5-canvas中实现绘制虚线的方法
- html5中canvas绘制矩形
- html5中canvas绘制圆形
- html5中canvas绘制线段
- 利用HTML5的canvas标签实现灰太狼图像的绘制
- HTML5 Canvas 绘制椭圆与椭圆弧的实现
- HTML5 Canvas中绘制椭圆的5种方法
- 使用HTML5 Canvas绘制一个时钟
- HTML5 Canvas 获取网页的像素值。
- html5 canvas 实现简单绘制折线图
- HTML5中canvas画图之绘制路径
- html5中canvas贝塞尔曲线绘制菊花
- html5中canvas绘制贝塞尔曲线
- html5中canvas线段绘制太阳花
- HTML5中使用canvas绘制复杂图形
- HTML5中使用canvas绘制矩形
- HTML5中使用canvas绘制圆形
- 黑马程序员—C#系列 (三)
- poj 3026 Borg Maze (bfs+最小生成树)
- Smack文档(翻译)
- java读取文件方法大全
- CF 332A Down the Hatch! 超级水题。。不过题目太长了
- HTML5 Canvas中实现绘制一个像素宽的细线
- thrift之TTransport层的堵塞的套接字I/O传输类TSocket
- 《C和指针》读书笔记(9)
- 9个tcpdump使用实例
- 条件注释判断浏览器
- linux下解压命令大全
- C#中ArrayList.ToArray()用法
- IM开发【1】 - Smack类库详细介绍 - 基于XMPP的即时通讯机制
- Bitmap使用