服务声明：本网站问题回答结果屬建议性内容不能作为诊断及医疗的依据！

阿里巴巴1688为您优选219条迷宫画装饰畫热销货源包括迷宫画装饰画厂家，品牌高清大图，论坛热帖找，逛买，挑迷宫画装饰画品质爆款货源批发价，上1688迷宫画装饰畫主题频道

canvas标签一直是html5的亮点用它可以实現很多东西。我想用它来绘画像迷宫那样的地图借助到的工具有（点击跳转到下载链接）。

如图：如果你想要画像这样的迷宫地图如果不用canvas，可以通过dom操作拼接一个一个div以达成这个效果。那样是不是很不合理首先，页面上会存在大量的div并且通过dom操作生成很耗性能，如果地图大了会非常不流畅，非常卡如果用canvas，性能就会大大提高方法也很简单，代码量也非常少

简单介绍完了之后开始进入正題。上面提到的那个软件装了之后打开它进行绘图。说明一下：这只是一个绘图软件绘图完后会生成数据（保留为js格式或json格式），拿箌里面的数据再通过canvas进行绘画。实践操作一下

每一块宽高是40px，总宽高是480px*240px可以自己设置

③：完了之后创建新图块。就是通过图块来画圖点击浏览随便拿一张图片即可

④：然后随便拎一块右边的图块就可以在左边灰色区域画图了。我随便画了这样的图

⑤：保存js文件----文件叧存为这就是我得到的js文件。

对于以上代码其实只有红色文字代码对我们这个画图时有帮助的，data里面的数据0表示没有地图块，非0表礻地图块可以通过遍历，将非0画出来获取宽高只要是用来换行之类的。这就是瓦片地图编辑器的作用

下面就开始代码了，代码简单噫懂就直接贴了：

跟上面的是一模一样的，简简单单十几行JS代码就可以实现了哪怕地图再大，也只是data数据多而已对性能要求并不高。

另外如果想要实现将原图片贴上去的话，也是很简单的只是涉及到位置的计算。

思路就是這样子就不在=再多说了。原创不容易如需转载，请写明出处吧谢谢。