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. [Asp.net 开发系列之SignalR篇]专题一：Asp.net SignalR快速入门

    一.前言 之前半年时间感觉自己有点浮躁,导致停顿了半年多的时间没有更新博客,今天重新开始记录博文,希望自己可以找回初心,继续沉淀.由于最近做的项目中用到SignalR技术,所以打算总结下Asp.net ...

  2. AlwaysOn 部分笔记及文档连接

    本文主要含有一些AlwaysOn 配置方法及连接. 本想展开详细写一下  无奈隔壁在年会排练节目,那歌唱得我只想赶紧回家!!!!!!!!!!!!!!! http://www.cnblogs.com/d ...

  3. C#中的线程三 (结合ProgressBar学习Control.BeginInvoke)

    C#中的线程三(结合ProgressBar学习Control.BeginInvoke) 本篇继上篇转载的关于Control.BeginInvoke的论述之后,再结合一个实例来说明Cotrol.Begi ...

  4. 团队项目——站立会议 DAY8

    第八次站立会议记录: 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1.张靖颜:在反复修改和审查后,处理功能模块代码出错处,完善并运行. 2.钟灵毓秀:再次检查代码,运行报错处的代码修改 ...

  5. JavaScript思维导图—运算符

    JavaScript思维导图-来自@王子墨http://julying.com/blog/the-features-of-javascript-language-summary-maps/

  6. Winform文件下载之断点续传

    在本系列的前两篇文章中,分别向大家介绍了用于完成下载任务的 WebClinet 和 WinINet 的基本用法和一些实用技巧. 今天来为大家讲述下载过程中最常遇到的断点续传问题. 首先明确一点,本文所 ...

  7. python Web开发框架-Django (1)

    以前用web.py(另外一款轻量级web开发框架)做一个监控管理平台,没有做特别的记录就不好拾起来.最近做一个日志聚合系统,使用的是django,这次就记下来,方便查询. Django是一个高效的we ...

  8. Java中常量小知识

    常量分类:常量分为静态常量,非静态常量(全局常量),局部常量 静态常量:要么定义的时候赋初值,要么在静态代码块中赋值 非静态常量:要么在定义的时候赋初值,要么在代码块中赋值 局部常量:可以在定义时赋初 ...

  9. Atitit.eclipse 4.3 4.4  4.5 4.6新特性

    Atitit intellij idea的使用总结attilax 1. ideaIC-2016.2.4.exe1 1.1. Ij vs eclipse市场份额1 1.2. Ij的优点(方便的支持gro ...

  10. 关于WPF中RichTextBox失去焦点后如何保持高亮显示所选择的内容

    其实很简单,只要将容器控件中的附加属性FocusManager.IsFocusScope设为True就可以了 下面是个简单的用例: <Window x:Class="WpfApplic ...