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

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

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();