html5的canvas绘制迷宫地图
canvas标签一直是html5的亮点,用它可以实现很多东西。我想用它来绘画像迷宫那样的地图。借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接)。
如图:如果你想要画像这样的迷宫地图,如果不用canvas,可以通过dom操作拼接一个一个div,以达成这个效果。那样是不是很不合理?首先,页面上会存在大量的div,并且通过dom操作生成很耗性能,如果地图大了,会非常不流畅,非常卡。如果用canvas,性能就会大大提高。方法也很简单,代码量也非常少。
简单介绍完了之后开始进入正题。上面提到的那个软件装了之后,打开它进行绘图。说明一下:这只是一个绘图软件,绘图完后会生成数据(保留为js格式或json格式),拿到里面的数据,再通过canvas进行绘画。实践操作一下。
①:打开后界面:
②:新建文件
每一块宽高是40px,总宽高是480px*240px,可以自己设置
③:完了之后创建新图块。就是通过图块来画图。点击浏览随便拿一张图片即可
④:然后随便拎一块右边的图块就可以在左边灰色区域画图了。我随便画了这样的图
⑤:保存js文件----文件另存为。这就是我得到的js文件。
(function(name,data){if(typeof onTileMapLoaded === 'undefined') {if(typeof TileMaps === 'undefined') TileMaps = {};TileMaps[name] = data;} else {onTileMapLoaded(name,data);}})("map1", { "height":6,"layers":[{"data":[0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0,0, 1, 1, 1, 1, 1, 1, 0],"height":6,"name":"\u5757\u5c42 1","opacity":1,"type":"tilelayer","visible":true,"width":12,"x":0,"y":0}],"nextobjectid":1,"orientation":"orthogonal","properties":{},"renderorder":"right-down","tileheight":40,"tilesets":[{"firstgid":1,"image":"..\/..\/..\/Public\/Pictures\/Sample Pictures\/Penguins.jpg","imageheight":768,"imagewidth":1024,"margin":0,"name":"Penguins","properties":{},"spacing":0,"tilecount":475,"tileheight":40,"tilewidth":40}],"tilewidth":40,"version":1,"width":12 });
对于以上代码,其实只有红色文字代码对我们这个画图时有帮助的,data里面的数据,0表示没有地图块,非0表示地图块。可以通过遍历,将非0画出来,获取宽高只要是用来换行之类的。这就是瓦片地图编辑器的作用。
下面就开始代码了,代码简单易懂,就直接贴了:
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>canvas绘制地图</title></head> <body><canvas id="canvas1" width="480" height="240"></canvas> <!--注意canvas的大小,要联系地图大小设置--><script> //瓦片地图编辑器获取到的数据var map={"data":[0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0],"height":6,"width":12}var canvas = document.getElementById("canvas1");var ctx = canvas.getContext("2d");var W = 40; //每一块地图块的宽var H = 40; //每一块地图块的高var l = 0;var t = 0;for (var i=0; i<map.data.length; i++){ l = i%map.width*W; //绘画每一块地图块的X坐标if (i%map.width==0&&i!=0){ //当达到一行是换行,注意第一行是0%0=0;所以应去除第一行换行的情况t+=H; //绘画地图块的Y坐标}if (map.data[i]>0){ //当地图块的数据不为0时绘画地图块ctx.fillRect(l, t, W, H);} }</script> </body> </html>
效果如下:
跟上面的是一模一样的,简简单单十几行JS代码就可以实现了,哪怕地图再大,也只是data数据多而已,对性能要求并不高。
另外,如果想要实现将原图片贴上去的话,也是很简单的,只是涉及到位置的计算。
canvas可以切割图片:ctx.drawImage(this, imgL, imgT, W, H, this.l, this.t, W, H);用这段代码就可以了。
自己的一个练习。
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><canvas id="canvas1" width="240" height="240"></canvas> </body> <script type="text/javascript"> var map = {"data":[0, 1, 0, 0, 0, 73, 0, 1, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 62, 62, 62, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],"height":6,"width":6,"imgWidth":14}; var canvas = document.getElementById("canvas1"); var ctx = canvas.getContext("2d"); var W = 40; var H = 40; var l = 0; var t = 0; for (var i=0; i<map.data.length; i++){l = i%map.width*W;if (i%map.width==0&&i!=0){t+=H;}if (map.data[i]>0){var imgObj = new Image();imgObj.src = "pic.jpg";imgObj.index = i;imgObj.l = l;imgObj.t = t;imgObj.onload = function (){ var imgL = (map.data[this.index]-1)%map.imgWidth*W;var imgT = Math.floor(map.data[this.index]/map.imgWidth)*H; ctx.drawImage(this, imgL, imgT, W, H, this.l, this.t, W, H);}} } </script> </html>
html5的canvas绘制迷宫地图相关推荐
- 解决Html5用canvas绘制不出来图片的问题
转载自 解决Html5用canvas绘制不出来图片的问题 如果使用html5的ctx.drawImage(img,0,0);绘制不出来, 就改为: img.onload = function(){ ...
- html5 简单图片效果,【HTML5】Canvas绘制简单图片教程,
[HTML5]Canvas绘制简单图片教程, 获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象的onload方法,调用context对象的drawIm ...
- html5的canvas绘制时钟
为什么80%的码农都做不了架构师?>>> 最近一直在学习html5,学到了html5的canvas标签,这个画布真的是很强大,它有对应的javascript的api的支持,你可 ...
- html5之canvas绘制
初探html5之canvas 参考w3与菜鸟教程中canvas介绍,以及一些网上的资料,总算实现了一个时钟,作为新手入门还是可取的. 下文两个部分,一是纯粹的时钟,二是添加了一些颜色插件.bootst ...
- HTML5实战——canvas 绘制钟表
用canvas绘制了一个钟表,废话不多说了,直接上代码吧.效果图如下: <!DOCTYPE html> <html> <head> <meta charset ...
- 如何用手机HTML制作哆啦a梦,HTML5利用canvas绘制哆啦A梦头部-电脑自学网
html5的canvas是很强大的,下面本篇文章使用html5 canvas 实现一个简单的哆啦A梦头部.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 效果如下: 代码如下: 您的 ...
- Html5学习------canvas绘制径向渐变图形
<!DOCTYPE HTML> <html><head><meta http-equiv="Content-Type" content=& ...
- HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)
绘制图形有很多方法,可以借助Flash实现,也可以使用SVG和VML来绘图.本次将要学习一种新的灰土方法--使用Canvas元素,它是基于HTML5原生的绘图功能.使用Canvas元素,可以绘制图形, ...
- HTML5利用Canvas绘制图形(绘制渐变、模式、变换)
绘制渐变 渐变是一种很普遍的视觉形象,能带来视觉上的舒适感.在Canvas中,绘图API提供了两个原生的渐变方法,包括线性渐变和径向渐变.渐变,在颜色集上使用逐步抽样的算法,可以应用的描边样式和填充样 ...
- html5、canvas绘制本地时钟
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
最新文章
- python tornado入门_Tornado入门
- Appium环境安装
- Oracle配置方面问题收集
- 【错误记录】Visual Studio 中配置 NDK 头文件路径
- 算法提高课-图论-负环-AcWing 361. 观光奶牛:spfa判正环、负环、01分数规划、二分
- kind富文本编辑器_在VueJs中集成UEditor 富文本编辑器
- Silverlight+WCF 新手实例 象棋 棋子定位与象棋类(四)
- python二进制移位_python移位运算的实现
- PHP获取一篇文章内容中的全部图片,并下载
- 如何把网站程序文件快速上传到服务器空间经历分享
- Tungsten Fabric如何增强Kubernetes的网络性能
- python彩虹蛇_贪吃蛇还能这么玩?绝对是你从未体验过的全新版本(上)
- js 判断是企业微信或微信
- 计算机主机sn号怎么查看,笔记本序列号怎么看_笔记本电脑SN序列号的查看方法-win7之家...
- ThreadX移植——STM32H7+MDK-AC6平台
- 龙之战神微信登录服务器,龙之战神微信登录版
- 0基础学原画多久入行?看看你还差什么?
- 42步进电机转速力矩曲线_步进电机的力矩与转速
- Backend TkAgg is interactive backend. Turning interactive mode on.解决办法
- c语言图书管理系统 - 链接数据库版(MySQL)
热门文章
- 5.15java例题:水仙花 奇偶数 三个和尚 求和 偶数求和 两只老虎 逢七过 减肥案例
- 英特尔的指令集体系结构_VLIW指令集架构 cpu指令集跟架构的区别
- c语言碰撞算法,c – 任意大小凸多边形之间碰撞检测的算法
- JS找出数组中重复的数字
- pytorch模型预测
- 网络安全竞赛C模块批量拿值脚本
- 中标麒麟linux模拟器,Kydroid安卓运行环境
- PS怎么调整字体的行间距
- 天津理工大学和天津工业大学计算机考研,天津工业大学和天津理工大学,谁的实力更强?谁的录取分数更高呢...
- 关于结构性金属制品制造行业鼎捷的一体化解决方案