SOURCE

console 命令行工具 X clear

                    
>
console
(function(doc, window) {
  const canvas = doc.getElementsByClassName('canvas-ruler')[0]

  canvas.width = canvas.parentNode.clientWidth
  canvas.height = canvas.parentNode.clientHeight
	
  const ctx = canvas.getContext('2d')
  
  function Ruler(props){
    this.step = props.step || 10 // 步进
    this.width = props.width || 1000
    this.color = props.color || '#686868'
    this.seg = Math.floor(this.width / this.step) // 刻度段数
  }
  Ruler.prototype.draw = function(ctx) {
    ctx.fillStyle = this.color
    ctx.strokeStyle = this.color
    ctx.lineWidth = 1
    ctx.beginPath()
    for (let i = 0; i < this.width; i += this.step) {
      ctx.moveTo(i, 0)
      if (i % this.step == 0) {
        if (i % (this.step * 10) == 0) {
          ctx.lineTo(i, 20)
        } else {
    			ctx.lineTo(i, 10)
        }
      }
    }
    ctx.closePath()
    ctx.stroke()
  }
  const ruler = new Ruler({
    width: canvas.width
  })
  ruler.draw(ctx)
  
  const line = doc.getElementsByClassName('line')[0]
  let offsetLeft = line.offsetLeft
  let startX = 0
  const mouseDownHandler = function(e) {
    startX = e.x
    doc.addEventListener('mousemove', mouseMoveHandler)
  }
  const mouseUpHandler = function(e) {
    doc.removeEventListener('mousemove', mouseMoveHandler)
    doc.removeEventListener('mouseup', mouseUpHandler)
    offsetLeft = line.offsetLeft
  }
  const mouseMoveHandler = function(e) {
    line.style.left = offsetLeft + e.x - startX + 'px'
    doc.addEventListener('mouseup', mouseUpHandler)
  }
  
  line.addEventListener('mousedown', mouseDownHandler)
})(document, window)
<div class="wrapper">
  <div class="box">
    <div class="line-wrapper">
      <canvas class="canvas-ruler"></canvas>
      <div class="line"></div>
    </div>
  </div>
</div>
.wrapper {
  position: relative;
  margin: 20px auto;
  width: 300px;
  height: 30px;
  border: 1px solid #cacaca;
}
.box {
  position: fixed;
}
.line-wrapper {
  position: absolute;
  height: 30px;
}
.line {
  position: absolute;
  padding-left: 5px;
  height: 100vh;
  top: 0;
  cursor: ew-resize;
  left: 100px;
  border-left: 1px solid #f00;
}