[点晴永久免费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
