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. JAVA RMI例子

    RMI 是java语言的一个RPC框架,本文给出基础例子如下: 1.实现接口: public interface ICalc extends Remote { public int add(int p ...

  2. 【IOS】Target membership

    Target membership是指XCode中,一个文件属于哪一个工程,在XCode左侧的工程面板中选中一个文件,在XCode右侧的属性面板中会显示其Target Membership,如下图. ...

  3. ASP.NET集成模式下的管道事件

  4. rewrite规则写法及nginx配置location总结

    rewrite只能放在server{},location{},if{}中,并且只能对域名后边的除去传递的参数外的字符串起作用. 例如http://seanlook.com/a/we/index.php ...

  5. 锋利的JQuery —— 选择器

    图片猛戳链接

  6. 树形打印lua table表

    为方便调试lua程序,往往想以树的形式打印出一个table,以观其表内数据.以下罗列了三种种关于树形打印lua table的方法;法一 local print = print local tconca ...

  7. Atitit apache 和guava的反射工具

    Atitit apache 和guava的反射工具 apache1 Spring的反射工具类 ReflectionUtils1 Guava 反射工具2 apache  34             7 ...

  8. iOS-数据持久化-对象归档

    一.简单说明 对象归档是将对象归档以文件的形式保存到磁盘中(也称为序列化,持久化),使用的时候读取该文件的保存路径读取文件的内容(也称为接档,反序列化), (对象归档的文件是保密的,在磁盘上无法查看文 ...

  9. CCNA网络工程师学习进程（4）网络设备的基本配置和详细介绍

        网络设备(路由器.交换机和防火墙等)与计算机一样需要操作系统.网络设备采用专用的操作系统,统称为IOS(Internetwork Operating System,网络操作系统).     ( ...

  10. OpenCascade Modeling Algorithms Fillets and Chamfers

    Modeling Algorithms Fillets and Chamfers 造型算法——倒圆与倒角 eryar@163.com 一.倒圆Fillet Constructor 1． BRepFil ...