更新：

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. CF961D Pair Of Lines

    题目描述 You are given n n n points on Cartesian plane. Every point is a lattice point (i. e. both of it ...

  2. Linux相关——手写测试程序

    由于本人太弱,,,不会lemon,,,也不会在ubuntu下安装lemon,所以我选择手写测试程序emmmm 首先要写这个东西我们要先知道对拍怎么写. ; i <= ; i++) { syste ...

  3. BZOJ4573：[ZJOI2016]大森林——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=4573 https://www.luogu.org/problemnew/show/P3348#sub ...

  4. BZOJ1257：[CQOI2007]余数之和——题解+证明

    http://www.lydsy.com/JudgeOnline/problem.php?id=1257 Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod ...

  5. POJ1741 tree 【点分治】

    Tree Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 25286   Accepted: 8421 Description ...

  6. bzoj 2588 Count on a tree 解题报告

    Count on a tree 题目描述 给定一棵\(N\)个节点的树,每个点有一个权值,对于\(M\)个询问\((u,v,k)\),你需要回答\(u\) \(xor\) \(lastans\)和\( ...

  7. URAL.1033 Labyrinth (DFS)

    URAL.1033 Labyrinth (DFS) 题意分析 WA了好几发,其实是个简单地DFS.意外发现这个俄国OJ,然后发现ACRUSH把这个OJ刷穿了. 代码总览 #include <io ...

  8. Mac添加锁屏快捷键

    Mac要想添加锁屏快捷键,必须使用Automator. 1. 打开Automator,创建一个新的服务. 2. 在左侧栏中找到 启动屏幕保护 ,将其拖曳到右侧窗口内,并且修改 服务收到改为" ...

  9. [zhuan]tomcat环境配置

    http://jingyan.baidu.com/article/8065f87fcc0f182330249841.html 一.安装JDK和Tomcat 1,安装JDK:直接运行jdk-7-wind ...

  10. 【DP优化】【P1430】序列取数

    传送门 Description 给定一个长为n的整数序列,由A和B轮流取数(A先取).每个人可从序列的左端或右端取若干个数(至少一个),但不能两端都取.所有数都被取走后,两人分别统计所取数的和作为各自 ...