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绘制迷宫地图的更多相关文章

  1. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  2. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  3. HTML5 在canvas绘制一个矩形

    笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...

  4. HTML5用canvas绘制五星红旗

    在HTML5一览中,我们提到html 5被冠以很多高帽,其中最高的一顶.备受争议的就是"Flash杀手".IT评论界老喜欢用这个词了,杀手无处不在.不管是不是杀手,HTML 5引进 ...

  5. html5的canvas绘制线条，moveTo和lineTo详解

    今天在看html5,里面新增的属性有一个canvas,它相当于一个画布你可以用js在里面画你想要的效果!我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚,尤其是moveTo和 ...

  6. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  7. html5、canvas绘制本地时钟

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  9. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

随机推荐

  1. SVN分支管理策略个人见解

    本篇目录 前言 SVN分支管理策略 VisualSVN Server TortoiseSVN客户端 Repository的创建 Check out trunk创建新项目MyProject trunk更 ...

  2. [.NET领域驱动设计实战系列]专题五：网上书店规约模式、工作单元模式的引入以及购物车的实现

    一.前言 在前面2篇博文中,我分别介绍了规约模式和工作单元模式,有了前面2篇博文的铺垫之后,下面就具体看看如何把这两种模式引入到之前的网上书店案例里. 二.规约模式的引入 在第三专题我们已经详细介绍了 ...

  3. Github注册账户

    这是注册页面: 注册完后应该会受到邮件,但我一直没有收到,换了邮箱也没有用 ± 账户可以登上去却没办法创建仓库.

  4. web前端工程师在移动互联网时代里的地位问题

    支付宝十周年推出了一个新产品:支付宝的十年账单,我也赶个时髦查看了一下我的支付宝十年账单,哎,感慨自己真是太屌丝了,不过这只是说明我使用淘宝少了,当我大规模网上购物时候,我很讨厌慢速的快递,所以我大部 ...

  5. 基于java的设计模式入门（1）——为什么要学习设计模式

    大年初一,楼主在这里给大家拜年,祝大家码上升职加薪,码上有对象结婚,码上有车有房,幸福安康. 过完年,回学校注册报道之后,大概就要回深圳到公司开始实习了.提高自己,无非就有两种方式,一是看书学习,二是 ...

  6. 微软官网下载windows系统有点全

    第一步:访问:https://www.microsoft.com/zh-cn/software-download/windows10ISO/ 默认就只能下载win10,这怎么行呢.巨硬程序员貌似没做服 ...

  7. Java基础之常用类

    1.Collections类: (1)此类完全由在 collection 上进行操作或返回 collection 的静态方法组成. (2)静态方法摘要: static <T> boolea ...

  8. 大叔也说Xamarin~Android篇~原生登陆与WebView的网站如何共享Session

    回到目录 事情是这样的,我们最近开了一个APP,主要使用xamarin做了一个登陆,它与服务器API进行数据通讯,当用户名密码正确去,跳转到新的activity,并在webview控件中打开服务端的H ...

  9. Node.js入门：Node.js&NPM的安装与配置

    Node.js安装与配置      Node.js已经诞生两年有余,由于一直处于快速开发中,过去的一些安装配置介绍多数针对0.4.x版本而言的,并非适合最新的0.6.x的版本情况了,对此,我们将在0. ...

  10. FIR.im Weekly － 劳动节我们也没有停下来

    五一到五四的节假日对勤劳的开发者们似乎是零存在,各种干货好资源也并未因假期的到来而减少,所以这周的 Weekly 依然多产. Swift 样式指南:2015年4月更新 这是 @开发技术前线 收录的由 ...