更新：

18-9-21：填了个坑，更新了canvas绘制过程。

根据的是百度提供的坐标，canvas的坐标是大的坐标在后面，所以跟实际生活方向相反。
所以canvas里的北方在下方，实际生活中北方在上方。

因为根据的是真实坐标，所以跟广州地铁提供的地图不一样。

左侧地图一种写法，右侧地图另一种写法。

左侧可以下拉菜单选择线路查看路线，还可以查询站名属于哪个路线；右侧是全地图。

暂时没有其他功能……欢迎指点。

看代码可以戳链接：https://github.com/littleHiuman/GZsubway-canvas

可以戳相册地址看高清图：http://hiuman.iteye.com/picture/136749

附上超级大图……：

canvas写的地铁地图的更多相关文章

  1. 用Canvas写桌球游戏！！！

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 昨天上班的时候闲着无事,就用Canvas写了个桌球游戏来玩玩....所以就拿这游戏上来水一发.或许对一些刚学canvas的人有帮助. 话说 ...

  2. canvas写的一个小时钟demo

    <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo of clock</title> ...

  3. 用Canvas写一个简单的游戏--别踩白块儿

    第一次写博客也不知怎么写,反正就按照我自己的想法来吧!怎么说呢?还是不要扯那些多余的话了,直接上正题吧! 第一次用canvas写游戏,所以挑个简单实现点的来干:别踩白块儿,其他那些怎么操作的那些就不用 ...

  4. 简单的运动学，用canvas写弹力球

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 跟之前的随笔一样,因为本人仍是菜鸟一只,所以用到的技术比较简单,不适合大神观看...... 学canvas学了有一个多礼拜了,觉得canv ...

  5. 原生canvas写的飞机游戏

    一个原生canvas写的飞机游戏,实用性不大,主要用于熟悉canvas的一些熟悉用法. 项目地址:https://github.com/BothEyes1993/canvas_game

  6. 封装构造函数，用canvas写饼状图和柱状图

    封装构造函数,用canvas写饼状图和柱状图 封装函数 // 场景 function XDLScence( options ) { this.stage = options.stage; //执行场景 ...

  7. 利用canvas写一个验证码小功能

    刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下: 主要代码如下: html <!DOCTYPE html> <html lang="en"> ...

  8. 基于 HTML5 Canvas 的交互式地铁线路图

    前言 前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是 ...

  9. 用Canvas写一个炫酷的时间更新动画玩玩

    正文必须要写点什么...   // '; var WINDOW_WIDTH = 913; var WINDOW_HEIGHT = 400; var RADIUS = 7; //球半径 var NUMB ...

随机推荐

  1. 进程池-限制同一时间在CPU上运行的进程数

    if __name__=='__main__' :  为了区分你是主动执行这个脚本,还是从别的地方把它当做一个模块去调用. 如果是主动执行,则执行.如果是调用的,则不执行主体. 1. 串行:切记切记: ...

  2. CodeForces.5A Chat Server's Outgoing Traffic

    Chat Server's Outgoing Traffic 点我挑战提目 考察点 模拟 字符串 Time Mem Len Lang 30 0 543 c++ 题意分析 给出类似一个群的即时通讯系统, ...

  3. HDOJ.2111 Saving HDU (贪心)

    Saving HDU 点我挑战题目 题意分析 给出来背包容量v和物品数量n,接下来n行分别给出每个商品单位体积的价值和物品总共的体积(注意是单位体积,不是每个物品).求出最多能装多少价值的物品. 典型 ...

  4. 【贪心】【P2117】小Z的矩阵

    传送门 Description 小Z最近迷上了矩阵,他定义了一个对于一种特殊矩阵的特征函数G.对于N*N的矩阵A,A的所有元素均为0或1, 当然询问一个矩阵的G值实在是太简单了.小Z在给出一个N*N矩 ...

  5. CodeBlocks调试功能快捷教程

    在程序设计中,单步调试能够跟踪程序的执行流程.跟踪过程中,还可以观察变量的变化,从而发现其中存在的问题.单步执行除了可以帮助我们发现设计的程序中存在的问题,对于初学者,还可以帮助我们理解语言的机制. ...

  6. bzoj 3212 Pku3468 A Simple Problem with Integers 线段树基本操作

    Pku3468 A Simple Problem with Integers Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 2173  Solved:  ...

  7. HDU1573 线性同余方程（解的个数）

    X问题 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  8. 使用 Rational AppScan 保证 Web 应用的安全性，第 2 部分: 使用 Rational AppScan 应对 Web 应用攻击

    1 当前 Web 安全现状 互联网的发展历史也可以说是攻击与防护不断交织发展的过程.目前,全球因特网用户已达 13.5 亿,用户利用网络进行购物.银行转账支付和各种软件下载,企业用户更是依赖于互联网构 ...

  9. phpstorm 安装

    16 sudo apt-get install python-software-properties 17 sudo add-apt-repository ppa:webupd8team/java 1 ...

  10. Java中JAVA_HOME与CLASSPATH的解析(转)

    很多人在初学Java的时候经常会被书中介绍的一堆环境变量的设置搞得头昏脑胀,很多书中都会在初装JDK的时候让他大家设置JAVA_HOME环境变量,在开发程序的时候设置CLASSPATH环境变量,而很多 ...