H5 canvas 实现类似于导航效果的线
最近做项目时遇到得问题,要在不使用任何API的情况下完成类似地图的所有功能,包括放大、缩小、滑动、等。其中显示路线或导航路线的功能就用到了<canvas>这个标签。并用特殊的技巧画出了还不错的效果,并将封装好js文件分享出来,给需要的人提供一种思路。
项目中应用效果展示:
本文章不提供基础canvas绘画教学~!
1.核心思想
灵魂画手上线233 |
第1步:画出一条用于衬托的底部直线
第2步:重新定位canvas(画布)位置 将其基于线的起点 注意是移动画布左上角的基点,方法是translate(X, Y);
第3步:旋转虚拟画布
可以看到,此时相对于虚拟画布来说X轴已经是相对于真实画布上得直线来说是重叠的,此时使用js绘画是使用虚拟画布的绘画,绘画结果会映射到真实画布上!也就是说现在在js中沿画布X轴画线,映射到真实画布上将是与绿色线条重叠的线条。
第4步:沿虚拟画布X轴循环贴箭头图片。 将准备好的箭头图标沿X轴使用drawImage()循环贴入画布中,并且要注意要有适当间隔。
第5步:重置画布到初始位置,一次绘画结束