2.canvas绘制网格以及坐标轴

html代码：

JS代码：

var canvas = document.getElementById('canvas2'),
        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 = 'white' ,
        axis_linewidth = 1.0 ,
        axis_color = 'white' ;
    function drawGrid(stepx , stepy){//绘制网格
        context.strokeStyle = 'black';
        context.lineWidth = 0.5 ;
        for(var i = stepx + 0.5 ; i < context.canvas.width ; i += stepx){
            context.beginPath();
            context.moveTo(i , 0);
            context.lineTo(i , context.canvas.height);
            context.stroke();
        }
        for(var i = stepy + 0.5 ; i < context.canvas.height ; i += stepy){
            context.beginPath();
            context.moveTo(0 , i);
            context.lineTo(context.canvas.width , i);
            context.stroke();
        }
    }
    function drawAxes(){//绘制坐标轴
        context.save();
        context.strokeStyle = axis_color;
        context.lineWidth = axis_linewidth;
        drawHorizontalAxis();
        drawVerticalAxis();
        context.lineWidth = ticks_linewidth;
        context.strokeStyle = ticks_color;
        drawVerticalAxisTicks();
        drawHorizontalAxisTicks();
        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_origin.x , axis_origin.y);
        context.lineTo(axis_origin.x , axis_top);
        context.stroke();
    }
    function drawVerticalAxisTicks(){
        var deltaX;
        for(var i = 1;i < num_vertical_ticks ; ++i){
            context.beginPath();
            context.lineWidth=1;
            if(i % 5 === 0)
                deltaX = tick_width;
            else
                deltaX = tick_width / 2;
            context.moveTo(axis_origin.x - deltaX ,
                axis_origin.y - i * vertical_tick_spacing);
            context.lineTo(axis_origin.x + deltaX ,
                axis_origin.y - i * vertical_tick_spacing);
            context.stroke();
        }
    }
    function drawHorizontalAxisTicks(){
        var deltaY;
        for(var i = 1;i < num_horizontal_ticks ; ++i){
            context.beginPath();

            if(i % 5 === 0)
                deltaY = tick_width;
            else
                deltaY = tick_width / 2;
            context.moveTo(axis_origin.x + i * horizontal_tick_spacing ,
                axis_origin.y - deltaY);
            context.lineTo(axis_origin.x + i * horizontal_tick_spacing ,
                axis_origin.y + deltaY);
            context.stroke();
        }
    }
    drawGrid(10,10);
    drawAxes();