[點晴永久免費OA]HTML5利用Canvas實現帶刻度坐標軸畫法
當前位置：點晴教程→點晴OA辦公管理信息系統
→『 經驗分享&問題答疑 』
參考書目：《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(); 效果如圖： 該文章在 2022/10/21 11:38:50 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
