canvas绘制箭头路径效果

前桥让几天有很多人问到了如何绘制高德地图那样的 导航箭头线 效果，当时想了想并不难就先用canvas 做敏辩局了，然后集成到了mapbox 上。 在线体验地址 ，迁移到其他map lib 也只需要应用相应的 地理转屏幕坐标 函数。

在canvas 的应用中我们经常会遇到各种线样式的绘制，比如虚线，渐变线，带pattern 线（箭头，铁轨图标等），或者虚线与pattern 的动画效果。如下图所示，总结下实现方法。

比如 ctx.setLineDash([10, 5])，就可以画出上图的虚线效果。发挥想象可以做灶缺出更多奇特效果。比如让虚线动起来，有走马灯的感觉。。

通过 createLinearGradient 函数创建渐变，然后设定其渐变色段， 赋值给strokeStyle，渐变效果如开头图所示

有个问题就是如果需要 渐变方向符合线条走向 ，这是常见需求，只需要提前算下每条线的范围和方向，创建对应的LinearGradient 即可，其实类似于下面的箭头绘制，需要 反算 atan 角度 一样的。

最后这个算是综合的应用，我写了些canvas functions 放到了之前的canvasOverlay 里面去用，可以方便的集成到各种支持canvas 的lib 里面用。

基本思路就是：（懒得画图了，思路比较简单）

需要注意的是 ，atan弧度角的计算在第二三象限，会跟第一四象限混淆。比如向左下角的 有向线的向量 是两个负值，但是tan 值是正的，跟第一象限一样，所以反算的时候也会算出来小于90度的角，实际上是大于180 的角度了，需要 + Math.PI

大概的绘制过程，code as follow:

就简单写到这里。

最近还有个问题提到比较多，关于canvas 上的图标如何贴合地图的倾斜，这也是个视觉上的问题。大抵上可以通过CSS3d 或者 canvas 的透视去做，前者应该更简单些。有空再实践下

请在绘制每条线条前，用beginPath()重置路径，这兄厅样每条线条的样式就可以单独设置了：

var cv = document.getElementById('canvas')

var g = cv.getContext('2d')

//绘肆尘缓制线条1

g.beginPath() //看这行

g.lineWidth=5

g.moveTo(x1,y1)

g.lineTo(x2,y2)

g.stroke()

//绘制线条2

g.beginPath()  //还有这行裂模

g.lineWidth=10

g.moveTo(x3,y3)

g.lineTo(x4,y5)

g.stroke()

在wxml中添加<canvas></canvas>组件。注意，这里必须要给id属性，style属性中必须有饥孙width和height。关于width和height的值，有个技巧就是width为100%，height为window高度。

获取window的高度，宽度，和像素比例。

写画图方法。新建canvas的上下文环境context，通过画window大小的矩形来设置背景色为#ffffff，老肢饥将图片插入到canvas中（注意left，top，width，height等参数），将文本插入到canvas中。最后调用wx.drawCanvas()来将图形和文字绘制出来。

在onReady中准备好图片（因为后期需要长按保存，所以需要使用https下图片，这里先下载到缓存中），调用前面定义绘图方法。

图片生成侍返，在真机（注意一定要在真机上测试，因为经常会出现开发工具中是好的，但是真机不能画出来的问题，一定要注意！）上测试也通过，OK啦。（这里不贴手机上的截图了）。

---