canvas--标尺

项目开发过程中，会遇到标尺的功能，标尺可以通过canvas来实现，具体实现如下：

1、html代码：

<canvas id='canvas' width='800' height='800' />

2、css代码：

body {
    background: #eeeeee;
}
#canvas {
    background: #ffffff;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 10px;
    -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
    -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
    box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}

3、js代码：

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
AXIS_MARGIN = 0,
AXIS_ORIGIN = { x: AXIS_MARGIN, y: canvas.height-AXIS_MARGIN },
AXIS_TOP   = AXIS_MARGIN,
AXIS_RIGHT = canvas.width-AXIS_MARGIN,
HORIZONTAL_TICK_SPACING = 50,
VERTICAL_TICK_SPACING = 50,
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 = 20,
TICKS_LINEWIDTH = 0.5,
TICKS_COLOR = 'navy',
AXIS_LINEWIDTH = 1.0,
AXIS_COLOR = 'blue';
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;
    drawVerticalAxisTicks();
    drawHorizontalAxisTicks();
    context.restore();
}
function drawHorizontalAxis() {
    context.beginPath();
    context.moveTo(AXIS_ORIGIN.x, AXIS_MARGIN);
    context.lineTo(AXIS_RIGHT,    AXIS_MARGIN)
    context.closePath();
    context.stroke();
}
function drawVerticalAxis() {
    context.beginPath();
    context.moveTo(AXIS_ORIGIN.x, AXIS_MARGIN);
    context.lineTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
    context.closePath();
    context.stroke();
}
function drawVerticalAxisTicks() {
    var deltaY;
    for (var i = 1; i < NUM_VERTICAL_TICKS; ++i) {
        context.beginPath();
        if (i % 5 === 0) {
            deltaX = TICK_WIDTH;
            context.moveTo(0, 0 + HORIZONTAL_TICK_SPACING * i);
            context.lineTo(20, 0 + HORIZONTAL_TICK_SPACING * i);
            context.textAlign = 'left';
            context.fillText(i * HORIZONTAL_TICK_SPACING, 30, 0 + HORIZONTAL_TICK_SPACING * i);
        }else {
            deltaX = TICK_WIDTH/2;
        }            
        context.moveTo(AXIS_ORIGIN.x, i * VERTICAL_TICK_SPACING);
        context.lineTo(AXIS_ORIGIN.x + deltaX, 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;
            context.moveTo(0 + VERTICAL_TICK_SPACING * i, 0);
            context.lineTo(VERTICAL_TICK_SPACING * i, 20);
            context.textAlign = 'left';
            context.fillText(i * VERTICAL_TICK_SPACING, 0 + VERTICAL_TICK_SPACING * i, 30);
         }else {
            deltaY = TICK_WIDTH/2;
         }           
        context.moveTo(AXIS_ORIGIN.x + i * HORIZONTAL_TICK_SPACING, AXIS_MARGIN);
        context.lineTo(AXIS_ORIGIN.x + i * HORIZONTAL_TICK_SPACING, AXIS_MARGIN + deltaY);
        context.stroke();
    }
}
drawAxes();

4、效果：