HTML5 Canvas笔记——实现坐标轴画法

参考书目：《HTML5 Canvas核心技术 图形、动画与游戏开发》

在HTML5 Canvas实现坐标轴画法

zuobiao.html

 

   

     

 

 

   

      Canvas not supported

   

   

 

zb.js

var canvas = document.getElementById("canvas"),

    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 drawGrid(context,color,stepx,stepy){

    context.strokeStyle = color;

    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 = 0.5;

    context.lineWidth = TICKS_LINEWIDTH;

    context.strokeStyle = TICKS_COLOR;

    drawHorizontalAxisTicks();

    drawVertialAxisTicks();

    drawNumberals();

}

//绘制横坐标

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 drawHorizontalAxisTicks(){

    var deltaY,num=0;

    for (var i = 1;i

        context.beginPath();

        if(i%5===0){

            deltaY = TICK_WIDTH;

            text();

            num++;

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

        function text(){

            context.font = "12pt Helvetica";

            context.fillText(num,AXIS_ORIGIN.x +(i-6)*HORIZONTAL_TICK_SPACING,AXIS_ORIGIN.y + 3*deltaY);

        }

    }

}

//横坐标标尺及刻度

function drawVertialAxisTicks(){

    var deltaX,num=1;

    for (var i=1;i

        context.beginPath();

        if(i % 5 === 0){

            deltaX = TICK_WIDTH;

            text();

            num++;

        }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 text(){

            context.font = "12pt Helvetica";

            context.fillText(num,AXIS_ORIGIN.x - 3*deltaX,AXIS_ORIGIN.y - i*VERTICAL_TICK_SPACING);

        }

    }

}

drawGrid(context,"lightgray",10,10);

drawAxes();

效果如图：