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多线程17：中断机制

    概述 之前讲解Thread类中方法的时候,interrupt().interrupted().isInterrupted()三个方法没有讲得很清楚,只是提了一下.现在把这三个方法同一放到这里来讲,因为 ...

  2. 一个App完成入门篇（三）-完善主框架

    本节教程将继续带领大家完善教学demo 导入项目 完善主框架 完成viewShower子视图 打开新页 启动动画 将要学习的demo效果图如下所示 1. 如何导入完整项目 本节示例demo请参考下载地 ...

  3. XSS零碎指南

    该文章是本人两天的学习笔记,共享出来,跟大家交流.知识比较零散,但是对有一定 JS 基础的人来说,每个小知识都有助于开阔你的 Hack 视角.首先声明,本文只是 XSS 攻击的冰山一角,读者自行深入研 ...

  4. TW2015技术雷达中文版发布

    今天thoughtworks 2015新版技术雷达pdf发布了,你可以从这里下载http://engage.thoughtworks.com/HQ0000Q0QOf5pE70nbD00GP,在这里你可 ...

  5. 5天玩转C#并行和多线程编程 —— 第三天 认识和使用Task

    5天玩转C#并行和多线程编程系列文章目录 5天玩转C#并行和多线程编程 —— 第一天 认识Parallel 5天玩转C#并行和多线程编程 —— 第二天 并行集合和PLinq 5天玩转C#并行和多线程编 ...

  6. DOM+CSS3实现小游戏SwingCopters

    前些日子看到了一则新闻,flappybird原作者将携新游戏SwingCopters来袭,准备再靠这款姊妹篇游戏引爆大众眼球.就是下面这个小游戏: 前者的传奇故事大家都有耳闻,至于这第二个游戏能否更加 ...

  7. [nRF51822] 5、 霸屏了——详解nRF51 SDK中的GPIOTE（从GPIO电平变化到产生中断事件的流程详解）

    :由于在大多数情况下GPIO的状态变化都会触发应用程序执行一些动作.为了方便nRF51官方把该流程封装成了GPIOTE,全称:The GPIO Tasks and Events (GPIOTE) . ...

  8. Office 2016 正式发布——新特性预览

    今天微软又发生了一件大事!Windows Office 2016正式发布,这标志着Windows Office 又达到了一个新的里程碑! 全新的Office 发布为Office 365 用户带来了新的 ...

  9. redis系列-redis的连接

    Redis 是完全开源免费的,遵守BSD协议,先进的key - value持久化产品.它通常被称为数据结构服务器,因为值(value)可以是 字符串(String), 哈希(Map), 列表(list ...

  10. underscore源码阅读记录（二）

    引自underscore.js context参数用法 _.each(list, iteratee, [context]); context为上下文,如果传递了context参数,则把iterator ...