SOURCE

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"),

    AXIS_MARGIN = 40,    //一个常量
    AXIS_ORIGIN = {
      x:AXIS_MARGIN,
      y:canvas.height-AXIS_MARGIN
    },   //原点坐标

    AXIS_TOP = AXIS_MARGIN,        //纵轴端点
    AXIS_RIGHT = canvas.width-AXIS_MARGIN,//横轴端点

    HORIZONTAL_TICK_SPACING = 10,   //横轴间距
    VERTICAL_TICK_SPACING = 10,    //纵轴间距

    AXIS_WIDTH = AXIS_RIGHT-AXIS_ORIGIN.x,    //横轴长度
    AXIS_HEIGHT=AXIS_ORIGIN.y-AXIS_TOP,       //纵轴长度

    NUM_VERTICAL_TICKS = AXIS_HEIGHT/VERTICAL_TICK_SPACING,    //纵轴标尺的数量
    NUM_HORIZONTAL_TICKS = AXIS_WIDTH/HORIZONTAL_TICK_SPACING,  //横轴标尺的数量

    TICK_WIDTH = 10,
    TICKS_LINEWIDTH = 0.5,
    TICKS_COLOR = "navy",

    AXIS_LINEWIDTH = 1.0,
    AXIS_COLOR = "blue";

function drawLineDash(context, start, end, color = 'gray') {
    context.save();
    context.lineWidth = 0.5;
    context.beginPath();
    context.strokeStyle = color;
    context.setLineDash([5]);
    context.moveTo(start.x,start.y);
    context.lineTo(end.x,end.y);
    context.stroke();
    context.restore();
}


function drawStick(ctx = context, x, y , height, width) {
  ctx.fillStyle=rgb();
  ctx.fillRect( x, y , height, width);
}

function rgb(){//rgb颜色随机
		return "#"+Math.round(Math.random()*0x1000000).toString(16);
}

function aimPoint(point, context) {
   	drawLineDash(context, 
                 {x: point.x + 0.5, y: 0}, 
                 {x: point.x, y:context.canvas.height}, 
                 rgb());

    drawLineDash(context, 
                 {x: 0, y: point.y + 0.5},
                 {x: context.canvas.width, y:point.y},
                 rgb());
}

//一个函数,由于绘制网格
function drawGrid(context,color,stepx,stepy){
    for(var i = stepx + 0.5; i < context.canvas.width;i += stepx){
        drawLineDash(context, {x: i, y: 0}, {x: i, y:context.canvas.height}, 'green')
    }

    for(var i = stepy + 0.5;i < context.canvas.height;i +=stepy){
        drawLineDash(context, {x: 0, y: i}, {x: context.canvas.width, y:i}, 'red')
    }
}

function drawAxes(option){
    context.save();
    context.strokeStyle = AXIS_COLOR;
    context.lineWidth = AXIS_LINEWIDTH;

    drawHorizontalAxis();
    drawVerticalAxis();

    context.lineWidth = 0.5;
    context.lineWidth = TICKS_LINEWIDTH;
    context.strokeStyle = TICKS_COLOR;

    drawHorizontalAxisTicks(option.HORIZONTAL.tick, option.HORIZONTAL.tick_spacing);
    drawVertialAxisTicks(option.VERTICAL.tick, option.VERTICAL.tick_spacing);
    //drawNumberals();
  	for(let i =0; i< option.HORIZONTAL.tick / 10; i++) {
      drawStick(context, 100 + option.HORIZONTAL.tick + 50 * i, option.HORIZONTAL.tick - 10 * i,  option.VERTICAL.tick - 10 * i, 150- 10 * i);
    }
  
    context.restore();
  
}

//横轴
function drawHorizontalAxis() {
    context.beginPath();
    context.moveTo(AXIS_ORIGIN.x,AXIS_ORIGIN.y);
    context.lineTo(AXIS_RIGHT,AXIS_ORIGIN.y);
    context.stroke();
}

//纵轴
function drawVerticalAxis(){
    context.beginPath();
    context.moveTo(AXIS_RIGHT,AXIS_ORIGIN.y);
    context.lineTo(AXIS_RIGHT,AXIS_TOP);
    context.stroke();
}

//绘制纵轴标尺及刻度数
function drawHorizontalAxisTicks(ticks, TICK_SPACING = HORIZONTAL_TICK_SPACING){
    var deltaY,num=0;

    for (var i = 1;i<ticks;++i){
        context.beginPath();
        if(i%5===0){
            deltaY = TICK_WIDTH;
            context.font = "12pt Helvetica";
            context.fillText(num,AXIS_ORIGIN.x +(i-6)*TICK_SPACING,AXIS_ORIGIN.y + 3*deltaY);
            num++;
        }else {
            deltaY = TICK_WIDTH/2;
        }
        context.moveTo(AXIS_ORIGIN.x + i*TICK_SPACING,AXIS_ORIGIN.y - deltaY);
        context.lineTo(AXIS_ORIGIN.x + i*TICK_SPACING,AXIS_ORIGIN.y + deltaY);
        context.stroke();
    }
}

//绘制横轴标尺及刻度
function drawVertialAxisTicks(ticks, TICK_SPACING = VERTICAL_TICK_SPACING){
    var deltaX,num=1;

    for (var i=1;i<ticks;++i){
        context.beginPath();
        if(i % 5 === 0){
            deltaX = TICK_WIDTH;
            context.font = "12pt Helvetica";
            context.fillText(num,AXIS_ORIGIN.x - 3*deltaX,AXIS_ORIGIN.y - i*TICK_SPACING);
            num++;
        }else{
            deltaX = TICK_WIDTH/2;
        }
        context.moveTo(AXIS_ORIGIN.x - deltaX,AXIS_ORIGIN.y - i*TICK_SPACING);
        context.lineTo(AXIS_ORIGIN.x + deltaX,AXIS_ORIGIN.y - i*TICK_SPACING);
        context.stroke();
    }
}

//drawGrid(context,"lightgray",50,50);
const option = {
  HORIZONTAL: {
      tick:NUM_HORIZONTAL_TICKS,
  		tick_spacing:HORIZONTAL_TICK_SPACING
  },
  VERTICAL: {
    	tick:NUM_VERTICAL_TICKS,
  		tick_spacing:VERTICAL_TICK_SPACING
  }
};
drawAxes(option);

var bindEvent = function(dom, eventName, listener){
  if(dom.attachEvent) {
    dom.attachEvent('on'+eventName, listener);
  } else {
    dom.addEventListener(eventName, listener);
  }
}

var helpCanvas = document.getElementById('help');
var helpContext = helpCanvas.getContext("2d");
var w = helpContext.canvas.width;
var h = helpContext.canvas.height;

bindEvent(helpCanvas, 'mousemove', function(e) {
  var offsetX = e.clientX - helpCanvas.clientLeft;
  var offsetY = e.clientY - helpCanvas.clientTop;
  //console.log(e.clientX,e.clientY,  offsetX, offsetY);

  helpContext.clearRect(0, 0, w, h);
  aimPoint({x: offsetX - 18, y: offsetY -10}, helpContext);
})

let h_tick = NUM_HORIZONTAL_TICKS;
let h_tick_spacing = HORIZONTAL_TICK_SPACING;

let v_tick = NUM_VERTICAL_TICKS;
let v_tick_spacing = VERTICAL_TICK_SPACING;

helpCanvas.onmousewheel = function(event){
  

  
  //event.wheelDelta火狐中不支持
  if(event.wheelDelta >0){ //向上滚
    //box.style.height = box.clientHeight - 5 + "px";
    h_tick += 2;
    h_tick_spacing -= .5
    
    v_tick += 2;
    v_tick_spacing -= .5
    //console.log("⬆", h_tick, h_tick_spacing);
    
  }
  else{     //向下滚
    //box.style.height = box.clientHeight + 5 + "px";
    h_tick -= 2;
    h_tick_spacing += .5
    v_tick -= 2;
    v_tick_spacing += .5
    //console.log("⬇⬇", h_tick, h_tick_spacing);
  }
  
  const option = {
    HORIZONTAL: {
        tick:h_tick,
        tick_spacing:h_tick_spacing
    },
    VERTICAL: {
        tick:v_tick,
        tick_spacing:v_tick_spacing
    }
  };
  context.clearRect(0, 0, w, h);
	drawAxes(option);
  return false; //取消默认行为  火狐不能使用
  // 当也网页界面有滚动条是需要取消浏览器的默认行为
}

<div class="chart">
  <canvas width="500" height="400" id="canvas"></canvas>
  <canvas width="500" height="400" id="help"></canvas>
</div>

.chart {
    position:relative;
    margin-top: 10px;
    margin-left: 10px;
}

.chart canvas {
  position:absolute;
  top:0;
  left:0; 
  border: 1px solid #cccccc;
  cursor:crosshair;
}