效果图如下,

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

JavaScript代码

canvas绘制坐标轴的更多相关文章

  1. canvas 绘制坐标轴

    结果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  2. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  4. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

  5. canvas绘制五角星详细过程

    canvas绘制 <canvas id="straight"></canvas> <script> var canvas = document. ...

  6. Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  7. 浅谈使用canvas绘制多边形

    本文主要使用坐标轴的使用来绘制多边形,点位则都是在y轴上寻找,这种方法能够更好的理解图形与修改. //id为html里canvas标签的属性id: //x,y为坐标轴的起始位置,因为canvas默认坐 ...

  8. canvas绘制折线图

    效果图: 重难点: 1.画布左上角的顶点的坐标为(0 ,0),右下角的坐标最大,与平常思维相反 2.数据的处理 html代码: <!DOCTYPE html><html lang=& ...

  9. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. HP QR Code 实现二维码

    二维码简单点说就是图片中含有数据信息,可以是url链接,也可能是其他的 首先下载该类,(http://download.csdn.net/detail/cgjcgs/9100365) 然后直接引入该类 ...

  2. Mahout推荐算法API详解

    转载自:http://blog.fens.me/mahout-recommendation-api/ Hadoop家族系列文章,主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, ...

  3. 关于安装CentOS 7 的注意事项

    1.安装VMware Workstation 2.安装CentOS的时候选择GNOME桌面 3.联网设置, VMWare Network Apapter VMnet8 设置IP4 自动获取IP地址,“ ...

  4. Mipmap与纹理过滤

    为了加快渲染速度和减少纹理锯齿,贴图被处理成由一系列被预先计算和优化过的图片组成的文件,这样的贴图被称为Mipmap. 使用DirectX Texture Tool(DX自带工具)预生成Mipmap ...

  5. C 标准库系列之ctype.h

    ctype.h 主要提供了一些函数用以测试字符或字符处理的功能函数:包括字符判断检测.字符转换: 目前ASCII字符可分为以下一些类型,如:大写.小写.字母.数字.十六进制.空白字符.可打印字符.控制 ...

  6. CozyRSS开发记录17-Html2Xaml

    CozyRSS开发记录17-Html2Xaml 1.RssContentView还需要优化 上回做了RssContentView的显示,但是对于rss返回的描述(摘要),连换行的没有,更别说里面还有h ...

  7. border-radius四个值的问题

    我们都知道border-radius后面如果是4个值的话,依次代表的是左上角.右上角.右下角.左下角. 但是这样写呢:border-radius:10px 20px 30px 40px/50px 40 ...

  8. 《DSP using MATLAB》示例Example5.21

  9. C++-Qt【4】-CheckBox on QListView

    引用:http://www.qtcentre.org/threads/47119-checkbox-on-QListView QListWidgetItem *item = new QListWidg ...

  10. 热浪[TYVJ1031]

    描述 德克萨斯纯朴的民眾们这个夏天正在遭受巨大的热浪!!!他们的德克萨斯长角牛吃起来不错,可是他们并不是很擅长生產富含奶油的乳製品.Farmer John此时以先天下之忧而忧,后天下之乐而乐的精神,身 ...