更新：

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. [洛谷P2921][USACO08DEC]在农场万圣节Trick or Treat on the Farm

    题目大意:给你一张有向图,每个点最多一条出边,问从每个开始,走多少步会到一个已经过的点 题解:$tarjan$缩点,然后建反图$DP$ 卡点:无 C++ Code: #include <cstd ...

  2. Codeforces Round #469 (Div. 2) F. Curfew

    贪心 题目大意,有2个宿管分别从1和n开始检查房间,记录人数不为n的房间个数,然后锁住房间. 没有被锁的房间中的学生可以选择藏在床底,留在原地,或者转移(最远转移d个房间)   然后抄了网上大神的代码 ...

  3. [BZOJ2961] 共点圆 [cdq分治+凸包]

    题面 BZOJ传送门 思路 首先考虑一个点$(x_0,y_0)$什么时候在一个圆$(x_1,y_1,\sqrt{x_1^2+y_1^2})$内 显然有:$x_1^2+y_1^2\geq (x_0-x_ ...

  4. [POI2007]ZAP-Queries && [HAOI2011]Problem b 莫比乌斯反演

    1,[POI2007]ZAP-Queries ---题面---题解: 首先列出式子:$$ans = \sum_{i = 1}^{n}\sum_{j = 1}^{m}[gcd(i, j) == d]$$ ...

  5. 2017 ccpc哈尔滨 A题 Palindrome

    2017 ccpc哈尔滨 A题 Palindrome 题意: 给一个串\(T\),计算存在多少子串S满足\(S[i]=S[2n−i]=S[2n+i−2](1≤i≤n)\) 思路: 很明显这里的回文串长 ...

  6. [转]Android 如何根据网络地址获取网络图片方法

    http://blog.csdn.net/xiazdong/article/details/7724103 目录(?)[-] h2pre namecode classhtml stylefont-we ...

  7. shell中的数值运算

    By francis_hao    Oct 2,2017   本文摘录自bash的man手册.   算数运算相关的形式 形式 含义 ((expression)) expression按照下面描述的算术 ...

  8. 使用Faster-Rcnn进行目标检测(实践篇)转载

    原 文链接:http://blog.csdn.net/gavin__zhou/article/details/52052915 原理 上一篇文章,已经说过了,大家可以参考一下,Faster-Rcnn进 ...

  9. Spring框架介绍和原理

    SpringMVC框架介绍 1) Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面. Spring 框架提供了构建 Web 应用程序的全功 ...

  10. 如何通过反射来创建对象？getConstructor()和getDeclaredConstructor()区别？

    1. 通过类对象调用newInstance()方法,适用于无参构造方法: 例如:String.class.newInstance() public class Solution { public st ...