之前朋友委托有个创业项目，想让我帮忙，正好那段时间有点闲，半推半就中就答应下来了。
入了团队才发现，该项目前后端分离，后端工程师已就位主要实现接口，IOS端工程师也已就位，还差一个web前端工程师。背脊一凉，我之前虽然写过一些js和css，虽有点功底但是离前端工程师还是有距离的啊。在和朋友说明情况后，朋友也是胆大，让我试试，主要他实在找不到人了（也有可能目前前端工程师报价都太贵了，创业嘛，能节约就节约，能理解。。。），没办法，走一步算一步吧。
其他管理页面都还好，主要Dashboard需要在地图上根据经纬度，半径，角度等画出喷灌机的实时位置和喷灌机洒水的扇形区域。
由于之前没有用过高德地图，也没画过图，刚拿到这个项目的时候，真的是一脸懵逼，没办法，只能埋头研究高德地图的api，发现里面有画圆、画折线、多边形等等一些api，很快，根据高德地图提供的官方demo，很快写了如下代码：
1 //开始绑定 2 for (var m = 0; m < deviceList.length; m++) { 3 var device = deviceList[m]; 4 var point = new AMap.LngLat(device.longitude, device.latitude);// 圆心位置; 5 6 var circle = new AMap.Circle({ 7 center: point,// 圆心位置 8 radius: device.radius, //半径 9 strokeColor: "white", //线颜色10 strokeOpacity: 1, //线透明度11 strokeWeight: 1, //线粗细度12 fillColor: "#6e97ce", //填充颜色13 fillOpacity: 0.9//填充透明度14 });15 16 17 circle.setMap(map);18 19 var marker = new AMap.Marker({20 map: map,21 position: [device.longitude, device.latitude],22 });23 24 //注册点击事件25 addClickHandler(circle, device);26 27 }实现了如下的图形。但是我发现画折线和扇形，地图上的api没办法很完美的实现，出来的扇形总是有点变形。跟我想要的效果还是有点距离的。
没办法，继续啃高德的api...
在图层里面看到了图片图层，貌似可以实现我的需求，但是我是纯js啊，想要动态生成一个图片再绑定到地图，貌似有点太复杂了。。。也有可能我前端太菜了。
好吧，放弃，继续研究ing...
发现自定义图层里面使用canvas做的（），眼前一亮，那我可以用canvas画好图再贴到地图上嘛，有点小激动。。。
可转念一想，canvas我没有用过啊，没办法，继续啃吧...
找了好多学习资料，发现有个图跟我有点像啊，就是大神们用canvas画的时钟，居然还能动，感觉被打开了一扇新大门。。。
参考了一堆大神的代码（本来想把链接一一都放出来的，但是都忘了收藏，导致现在都找不到链接了），在不断的摸索中（短短几个字，我可是啃了好几个晚上），终于算把图形画出来了。。。
不废话，先上代码：
12 34
图形如下：
值得注意的是，这个图里面我觉得比较费事的是这个带方向的黑色小箭头，用到了rotate，经过反复测试，我发现从0-360度，他都会沿着圆心去旋转，下图黑色箭头80°方向旋转了，那其实这个位置和+90°后我要的放心是一致的（即红色箭头），抓住这个特性我即完成了箭头沿着圆的方向旋转这个问题。
整个图完成后，我感觉几何图形又复习了一边...果然学好数理化，走遍天下都不怕，哈哈。
既然canvas图已经基本完成，那怎么集成到高德地图上来，并根据地图的等比缩放，就成了我下一个需要攻克的难题...
华丽的分割线
好了，第一次写博客，有点像流水账，(-__-)b，只为了记录我的一些想法和遇到的难点，希望以后对别人也能有所帮助。
下一篇我会着重写怎么集成到高德地图上，以及遇到的一些通点。
