canvas画线API实现简单地图

做一个青海项目时，涉及到地图，简单显示青海省个地区的用了一个svg插件，要求显示热点数据的就用了百度的地图API。地图的确高大上。

回顾一、后台老大哥负责跟客户沟通的，突然有一天客户要求说登录页显示地区的地图要有3D效果。心里顿时有一万匹草泥马奔过~~

                百度许久，没找到可用的方案，最终这种需求被开发说了No！

回顾二、另一个系统的登录页，因为用户要选择自己所在的地区才可以登录。要求下拉框选中地区时，对应的地图区域自动高亮；选中区域时，下拉框自动选中对应区域。

                没办法，只有深入分析源码。源码还好没有uglify，不然要死去活来。没注释就只有代码即注释。但里面的函数调用有点反人类。花了半天时间还是解决问题了。

虽然岗位是前端，但对图形学还是感兴趣的。于是就打算写个简单的地图~谈不上造轮子，算是前期的技术储备吧。

关于为什么造轮子，这个值得一看：http://blog.csdn.net/foruok/article/details/51403890

下面进入正题。

涉及到的知识点：

1. 点在多边形内算法：https://www.zhihu.com/question/26551754/answer/33185339
2. 3次贝塞尔曲线算法

给定散点数组，绘制光滑的闭合曲线。虽然canvas有贝塞尔曲线的API，但这样就不好判断指定点是否在闭合曲线美了。

不用svg，那样岂不是显得自己很low？而且还要先计算好控制点。作为一名(I)程(am)序(front)员(end)，重复的工作必须用编程解决！！！

找过不少拟合闭合曲线平滑的文章没什么收获，只能用贝塞尔曲线，但都被控制点的计算问题拦了下拉，毕竟工作之外的时间很宝贵，太复杂的算法太耗时间(我数学不好)。

     终于两天前意外发现了一篇文章，提出了简便解决控制点计算的问题。

    传送门：http://blog.csdn.net/hzsjun/article/details/24958773

    之前就已经实现了知识点1，一个晚上就大致完成了地图。今晚发现有bug，修改了下就打算写这篇文章。

   开始工作时有点忙，而且人有比较懒，都没怎么写博客。

  来两张图：(红点是数据点)

水印竟然不是我的大名，要它干嘛？

最后附上下载地址：sorry，刚刚上传等有时间来更新~如果忘了，可以给我留言~

补上地址：http://download.csdn.net/detail/ruanjiayou123/9700407