HTML5Canvas实现绘制一个像素宽的细线-

绘制一个像素宽的细线，在运用HTML5Canvas实现时要特殊注意确保你的所有坐标点是整数，不然HTML5会主动实现边沿反锯齿，感乐趣的伴侣可以看下结果图 绘制一个像素宽的细线，在运用HTML5 Canvas实现时要特殊注意确保你的所有坐标点是整数，不然HTML5会主动实现边沿反锯齿，感乐趣的伴侣可以看下结果图

正统的HTML5 Canvas中如下代码

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

运转效果绘制出来的并不是一个像素宽度的线

/** 
* 
 draw one pixel line 
 
* @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实现绘制一个像素宽的细线的细致内容，更多请关注 百分百源码网 其它相干文章！