参考书目：《HTML5 Canvas核心技术 图形、动画与游戏开发》
在HTML5 Canvas实现坐标轴画法
zuobiao.html
<!DOCTYPE html>
<html>
<head>
<title>zb</title>
<style>
body {
background: #dddddd;
}
#canvas {
position: absolute;
left: 0px;
top: 0px;
margin: 20px;
background: #ffffff;
border: thin solid #aaaaaa;
}
</style>
</head>
<body>
<canvas id='canvas' width='600' height='600'>
Canvas not supported
</canvas>
<script src='zb.js'></script>
</body>
<html>
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<NUM_HORIZONTAL_TICKS;++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<NUM_VERTICAL_TICKS;++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();
效果如图：
