參考書目：《HTML5 Canvas核心技術 圖形亥啦、動畫與游戲開發(fā)》
在HTML5 Canvas實現(xiàn)坐標軸畫法
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,? ? //縱軸標尺的數(shù)量
? ? NUM_HORIZONTAL_TICKS = AXIS_WIDTH/HORIZONTAL_TICK_SPACING,? //橫軸標尺的數(shù)量
? ? TICK_WIDTH = 10,//刻度長度
? ? TICKS_LINEWIDTH = 0.5,//刻度粗細
? ? TICKS_COLOR = "navy",//刻度顏色
? ? AXIS_LINEWIDTH = 1.0,//軸粗細
? ? AXIS_COLOR = "blue";//軸粗細
? ? //一個函數(shù),由于繪制網格
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();
}
//繪制縱坐標標尺及刻度數(shù)
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();
效果如圖：
