canvas绘制标尺

发布时间： 2019-02-19 16:38:39

/**
 * canvas 绘制标尺
 * 
 * params:{*}
 *      axisWidth:Number,轴线的宽度，单位px
 *      lineColor:String,轴线的颜色
 *      gridWidth:Number,大网格的宽度
 *      gridHeight:Number,大网格的高度
 * 
 * dom:Dom元素,canvas的元素
 */

function CanvasRuler(params, dom) {
  let AXIS_WIDTH = 1,
    LINE_COLOR = "#000000",
    GRID_WIDTH = 100,
    GRID_HEIGHT = 20;

  let canvas = dom;

  const DRAW_TYPE = {
    HORIZONTAL: 1,
    VERTICAL: 2,
    ALL: 3,
    NONE: 4
  };

  this.getDrawType = function() {
    return DRAW_TYPE;
  }

  this.setAxisWidth = function(axisWidth) {
    AXIS_WIDTH = Number(axisWidth) ? Number(axisWidth) : 1;
  }
  this.getAxisWidth = function() {
    return AXIS_WIDTH;
  }

  this.setLineColor = function(lineColor) {
    LINE_COLOR = lineColor;
  }
  this.getLineColor = function() {
    return LINE_COLOR;
  }

  this.setGridWidth = function(gridWidth) {
    GRID_WIDTH = Number(gridWidth) ? Number(gridWidth) : 1;
  }
  this.getGridWidth = function() {
    return GRID_WIDTH;
  }

  this.setGridHeight = function(gridHeight) {
    GRID_HEIGHT = Number(gridHeight) ? Number(gridHeight) : 1;
  }
  this.getGridHeight = function() {
    return GRID_HEIGHT;
  }

  this.getDomElement = function() { //清空canvas
    return canvas;
  }

  this.clearCanvas = function() {
    canvas.width = canvas.width;
  }

  this.setAxisWidth(params.axisWidth);
  this.setLineColor(params.lineColor);
  this.setGridWidth(params.gridWidth);
  this.setGridHeight(params.gridHeight);
}

CanvasRuler.prototype = {
  constructor: CanvasRuler,
  init: function(type) {
    this.clearCanvas();
    ctx = this.getDomElement().getContext('2d');
    ctx.lineWidth = this.getAxisWidth();
    ctx.strokeStyle = this.getLineColor();
    let DRAW_TYPE = this.getDrawType();
    switch (type) {
      case DRAW_TYPE.HORIZONTAL:
        this.drawHorizontalAxis(ctx);
        break;
      case DRAW_TYPE.VERTICAL:
        this.drawVerticalAxis(ctx);
        break;
      case DRAW_TYPE.ALL:
        this.drawHorizontalAxis(ctx);
        this.drawVerticalAxis(ctx);
        break;
      default:
        break;
    }
  },

  //绘制水平轴
  drawHorizontalAxis: function(ctx) {
    let gridWidth = this.getGridWidth();
    let gridHeight = this.getGridHeight();
    ctx.beginPath();
    ctx.moveTo(gridHeight + 0.5, gridHeight);
    ctx.lineTo(gridWidth + 0.5, gridHeight);
    for (let i = 0.5; i < gridWidth; i = i + gridWidth / 10) {
      ctx.moveTo(i, gridHeight);
      if (i < gridHeight) continue;
      if (i == gridWidth / 10 * 5) {
        ctx.lineTo(i, gridHeight / 2);
      } else {
        ctx.lineTo(i, gridHeight * 2 / 3);
      }
    }
    ctx.stroke();
    for (let i = gridWidth + 0.5; i < this.getDomElement().width; i = i + gridWidth) {
      ctx.beginPath();
      ctx.moveTo(i, 0);
      ctx.lineTo(i, gridHeight);
      ctx.lineTo(i + gridWidth, gridHeight);
      for (let j = i + gridWidth / 10; j < i + gridWidth; j = j + gridWidth / 10) {
        ctx.moveTo(j, gridHeight);
        if (j == i + gridWidth / 10 * 5) {
          ctx.lineTo(j, gridHeight / 2);
        } else {
          ctx.lineTo(j, gridHeight * 2 / 3);
        }
      }
      ctx.stroke();
    }
  },

  //绘制垂直轴
  drawVerticalAxis: function() {
    let gridWidth = this.getGridWidth();
    let gridHeight = this.getGridHeight();
    ctx.beginPath();
    ctx.moveTo(gridHeight, gridHeight + 0.5);
    ctx.lineTo(gridHeight, gridWidth + 0.5);
    for (let i = 0.5; i < gridWidth; i = i + gridWidth / 10) {
      ctx.moveTo(gridHeight, i);
      if (i < gridHeight) continue;
      if (i == gridWidth / 10 * 5) {
        ctx.lineTo(gridHeight / 2, i);
      } else {
        ctx.lineTo(gridHeight * 2 / 3, i);
      }
    }
    ctx.stroke();
    for (let i = gridWidth + 0.5; i < this.getDomElement().height; i = i + gridWidth) {
      ctx.beginPath();
      ctx.moveTo(0, i);
      ctx.lineTo(gridHeight, i);
      ctx.lineTo(gridHeight, i + gridWidth);
      for (let j = i + gridWidth / 10; j < i + gridWidth; j = j + gridWidth / 10) {
        ctx.moveTo(gridHeight, j);
        if (j == i + gridWidth / 10 * 5) {
          ctx.lineTo(gridHeight / 2, j);
        } else {
          ctx.lineTo(gridHeight * 2 / 3, j);
        }
      }
      ctx.stroke();
    }
  }

}

eg:预览链接

1.html

<canvas id="rulerCanvas"></canvas>

2.css

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#rulerCanvas {
  background: #000;
}

3.js

var canvas = document.getElementById('rulerCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

window.canvasRuler = new CanvasRuler({
  axisWidth: 0.4,
  lineColor: '#fff',
  gridWidth: 100,
  gridHeight: 20
}, canvas);

canvasRuler.init(canvasRuler.getDrawType().ALL);