更新：

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. 【题解】CF#280 C-Game on Tree

    感觉对期望也一无所知……(:′⌒`)╮(╯﹏╰)╭ 一直在考虑怎么dp,最后看了题解——竟然是这样的???[震惊]但是看了题解之后,觉得确实很有道理…… 我们可以考虑最后答案的组成,可以分开计算不同的 ...

  3. [NOIP2017]宝藏 子集DP

    题面:[NOIP2017]宝藏 题面: 首先我们观察到,如果直接DP,因为每次转移的代价受上一个状态到底选了哪些边的影响,因此无法直接转移. 所以我们考虑分层DP,即每次强制现在加入的点的距离为k(可 ...

  4. ARC072 D Alice&Brown 博弈论

    ---题面--- 题解: 题目大意:有2堆石子数分别为x, y的石子,你每次可以从中间的某一堆中取出2i个石子,扔掉i个,并把剩下的i个放到另一堆,无法操作的人就输了. 现在给定x,y,判断先手必赢还 ...

  5. angularJS 条件查询 品优购条件查询品牌（条件查询和列表展示公用方法解决思路 及 post请求混合参数提交方式）

    Brand.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  6. spring cloud config的bootstrap.yml与application.proterties的区别

    bootstrap.yml  和application.yml  都可以用来配置参数 bootstrap.yml可以理解成系统级别的一些参数配置,这些参数一般是不会变动的 application.ym ...

  7. ringbuffer

    http://blog.csdn.net/xiaolang85/article/details/38419163

  8. HDU3666 差分约束

    THE MATRIX PROBLEM Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  9. uboot主Makefile分析（t配置和编译过程详解）

    1.编译uboot前需要三次make make distcleanmake x210_sd_configmake -j4 make distclean为清楚dist文件. make x210_sd_c ...

  10. jQuery中 $.extend 和 $.fn.extend 作用及区别

    jQuery为开发插件提拱了两个方法,分别是: 1. jQuery.fn.extend(); 2. jQuery.extend(); 虽然 javascript没有明确的类的概念,但是可以构建类似类的 ...