H5 canvas 实现类似于导航效果的线

2021-06-13 19:58:56 阅读：235 来源： 互联网

H5 canvas 实现类似于导航效果的线

最近做项目时遇到得问题，要在不使用任何API的情况下完成类似地图的所有功能，包括放大、缩小、滑动、等。其中显示路线或导航路线的功能就用到了<canvas>这个标签。并用特殊的技巧画出了还不错的效果，并将封装好js文件分享出来，给需要的人提供一种思路。

项目中应用效果展示:
在这里插入图片描述
本文章不提供基础canvas绘画教学~！

1.核心思想

灵魂画手上线233

第1步:画出一条用于衬托的底部直线
在这里插入图片描述

第2步:重新定位canvas（画布）位置将其基于线的起点注意是移动画布左上角的基点，方法是translate(X, Y);
在这里插入图片描述

第3步:旋转虚拟画布
在这里插入图片描述
可以看到，此时相对于虚拟画布来说X轴已经是相对于真实画布上得直线来说是重叠的，此时使用js绘画是使用虚拟画布的绘画，绘画结果会映射到真实画布上！也就是说现在在js中沿画布X轴画线，映射到真实画布上将是与绿色线条重叠的线条。

第4步:沿虚拟画布X轴循环贴箭头图片。将准备好的箭头图标沿X轴使用drawImage()循环贴入画布中,并且要注意要有适当间隔。
在这里插入图片描述

第5部：重置画布到初始位置，一次绘画结束
在这里插入图片描述

2.Road.js的使用

这个文件是a自己封装得文件，需要在script中引用↓

<script src="./road.js"></script>

并且在body中至少存在以下2个标签

		<!--由于需要一个img的dom 需要手动创建一个完整的img标签 
		一般用 display:none 将其隐藏-->
        <img id="map_roadIcon" src="./images/road_icon.png" alt="">
       
        <!--要操作的画布-->
        <canvas id="map_drawing" width="500" height="500"></canvas>

在js中使用

    <script type="text/javascript">
//         new一个road对象      这里使用jQuery取dom得方法 也可以使用原生取dom得方法
        var road = new Road( $("#map_drawing").get(0), $("#map_roadIcon").get(0));
//                          起  起   终  终  
//                          点  点   点  点  路  间
//                          X   Y    X   Y  宽  隔
        road.paintArrayRoad(10, 20, 480, 20, 20, 60); //默认底色绿色
        road.paintArrayRoad(10, 180, 480, 180, 20, 60, "#FF000d"); //更改底色
    </script>

效果:
在这里插入图片描述
文件中有标详细注解这里就不再赘述

3.文件下载

https://download.csdn.net/download/GAA775/19576616

标签：canvas,20,js,画布,使用,H5,导航,road
来源： https://blog.csdn.net/GAA775/article/details/117880592

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

H5 canvas 实现类似于导航效果的线