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

<canvas id="canvas2"width="300" height="300"></canvas>

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