canvas识别路线

---

theme: jzman

视频说明

jvideo

前言

效果一

技术栈

• html
• javascript
• css
• canvas

项目主要功能上传一张地图，或者迷宫地图，通过canvas的一系列操作，并指定一个起点和终点，并找到到达终点最近的路线

迷宫找出口效果

正文

加载图像

首先是加载图像，选择一张图，最好是底色是相同的 或者说底色的色差不是很大，你也可以在网上找一张迷宫的图片

```javascript var imgObj = new Image(); imgObj.src = "../img/floor.jpg";

//待图片加载完后，将其显示在canvas上 imgObj.onload = function () { drawImg(this) } ```

通过new Image构造一个图像，等价于document.createEleme