HTML5 Canvas中实现绘制一个像素宽的细线

简介: HTML5 Canvas中实现绘制一个像素宽的细线

正统的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的函数

1./**
 * <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画线的一个小技巧

觉得不错请顶一下。

相关文章
|
1月前
|
移动开发 前端开发 JavaScript
纯HTML5 Canvas实现的饼图
纯HTML5 Canvas实现的饼图
21 6
|
1月前
|
移动开发 前端开发 HTML5
HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示
37 4
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
22 3
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas实现360度全景图
HTML5 Canvas实现360度全景图
21 1
|
1月前
|
移动开发 前端开发 JavaScript
浏览器端图表渲染技术SVG, VML HTML Canvas
浏览器端图表渲染技术SVG, VML HTML Canvas
16 0
|
Web App开发 移动开发 前端开发
|
4天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
|
8天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
10天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】Animated Navigation
【HTML+CSS+JavaScript】Animated Navigation
8 0
|
10天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】animated-countdown
【HTML+CSS+JavaScript】animated-countdown
8 0