html5 canvas 游戏地图绘制

代码如下：

 

  1 <!DOCTYPE html>
  2 
  3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4 <head>
  5     <meta charset="utf-8" />
  6     <title></title>
  7 </head>
  8 <body style="text-align:center;">
  9     <canvas id="myCanvas" width="800" height="800" onclick="savedata()" onmousemove="showmouse()" style="background:#808080;margin-left:10px; "></canvas>
 10     <img src="801.png" />
 11     <script>
 12         //墙
 13         var img = new Image();
 14         img.src = "801.png";
 15 
 16         //画布宽
 17         var canWidth = 400;
 18         //画布高
 19         var canHeight = 800;
 20         //墙块宽度
 21         var canStoreWidth = 80;
 22         //画布
 23         var ctx;
 24         //图片数据
 25         var imageData;
 26         //地图map
 27         var mapJson = new Array();
 28 
 29         window.onload = function ()
 30         {
 31             var canvas = document.getElementById('myCanvas');
 32             ctx = canvas.getContext('2d');
 33             savedata();
 34         }
 35 
 36         //获取到坐标所在的索引
 37         function inlocation(x, y)
 38         {
 39             var xx = x / canStoreWidth;
 40             var yy = y / canStoreWidth;
 41 
 42             return {
 43                 x1: parseInt(xx) == xx ? xx : parseInt(xx) + 1,
 44                 y1: parseInt(xx) == yy ? yy : parseInt(yy) + 1
 45             };
 46         }
 47 
 48         //1,将屏幕平均分割成分[10,20]
 49         //2,每块大小40*40
 50 
 51         //得到块区域
 52         function getStore(indexX, indexY)
 53         {
 54             var x = 0;
 55             var y = 0;
 56             x = (indexX - 1) * canStoreWidth;
 57             y = (indexY - 1) * canStoreWidth;
 58             return { X: x, Y: y };
 59         }
 60 
 61         //绘制事件
 62         function showmouse()
 63         {
 64             if (ctx)
 65             {
 66                 setdata();
 67                 var e = event;
 68                 //绘制块
 69                 var xy1 = inlocation(e.offsetX, e.offsetY);
 70                 var location = getStore(xy1.x1, xy1.y1);
 71 
 72                 ctx.drawImage(img, location.X, location.Y, canStoreWidth, canStoreWidth);
 73                 //人物不可存在不可以移动的元素上面
 74             }
 75         }
 76         //保存每次绘制的地图
 77         function savedata()
 78         {
 79             if (ctx)
 80             {
 81                 imageData = ctx.getImageData(0, 0, canWidth, canHeight);
 82                 //纪录当前点击的模块
 83                 var e = event;
 84                 if (e.type == "click")
 85                 {
 86                     //绘制块
 87                     var xy1 = inlocation(e.offsetX, e.offsetY);
 88                     mapJson.push(new Array(xy1.x1, xy1.y1));
 89                 }
 90             }
 91         }
 92         //重绘保存好的图片
 93         function setdata()
 94         {
 95             if (imageData)
 96             {
 97                 ctx.putImageData(imageData, 0, 0);
 98             }
 99         }
100         //绘图太快有bug，不知道什么情况
101     </script>
102 </body>
103 </html>

 

 

801.png图片

posted @ 2016-10-25 18:30  zhaoyuan  阅读(3532)  评论(0)  编辑  收藏  举报