更新：

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. [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_ ...

  2. [CQOI2012]交换棋子 网络流

    ---题面--- 题解: 一开始很快想出了一个接近正解的建图方法,但其实是错误的,不过还是骗了70分_(:зゝ∠)_ 首先我们可以观察到棋子有限,但费用多种,其实也就相当于限制了流量,找最小费用 对于 ...

  3. Warning: Received `false` for a non-boolean attribute `xxx`.

    React对boolean类型的attribute的识别方式问题,可以采用以下方法解决: xxx={value ? 1 : 0} 改成数字的写法,不用布尔值. 具体可以参考:https://githu ...

  4. java访问Https服务的客户端示例

    关于证书 1.每个人都可以使用一些证书生成工具为自己的https站点生成证书(比如JDK的keytool),大家称它为“自签名证书”,但是自己生成的证书是不被浏览器承认的,所以浏览器会报安全提示,要求 ...

  5. httpClient需要的jar包

  6. linux 下文件重命名/移动/复制命令（转）

    linux 下文件重命名/移动/复制命令(转) linux下重命名文件:使用mv命令就可以了, 例:要把名为:abc   重命名为:123 可以这样操作: 重命名:MV命令 1.进入你的文件目录,运行 ...

  7. java 在centos6.5+eclipse环境下调用opencv实现sift算法

    java 在centos6.5+eclipse环境下调用opencv实现sift算法,代码如下: import org.opencv.core.Core; import org.opencv.core ...

  8. HDU 2094 拓扑排序

    产生冠军 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  9. POJ---3463 Sightseeing 记录最短路和次短路的条数

    Sightseeing Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 9247   Accepted: 3242 Descr ...

  10. Java重要知识点

    1.Java中除了static方法和final方法之外,其它所有的方法都是动态绑定,如同C++的虚函数,但是我们不需要显示的声明. private方法本质上属于final方法(因此不能被子类访问). ...