hexgrid/index.html

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   4 <head>
   5     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
   6     <link rel="stylesheet" href="../style/pixelless.css" type="text/css"/>
   7     <script type="text/javascript" src="../script/util.js"></script>
   8     <script type="text/javascript" src="../script/canvas.js"></script>
   9     <script type="text/javascript" src="../script/geometry.js"></script>
  10     <script type="text/javascript" src="script/hexcell.js"></script>
  11     <script type="text/javascript" src="script/hexgrid.js"></script>
  12     <title>Hexagonal grid</title>
  13 </head>
  14 <body>
  15 <div id="container">
  16     <div class="content header">
  17         <h1>Hexagonal grid</h1>
  18     </div>
  19
  20     <div class="content">
  21         <canvas id="target" width="800px" height="500px">Convas is not supported in this browser.</canvas>
  22         <div class="empty_footer">
  23         </div>
  24     </div>
  25 </div>
  26 <div id="footer">
  27     <div class="content">
  28         &copy; Copyright
  29     </div>
  30 </div>
  31 <script type="text/javascript" language="JavaScript">
  32     if(!('console' in this))console = {log:function(){}}
  33
  34     var ctx = document.getElementById('target').getContext('2d');
  35     var off = new Point(400.5, 250.5);
  36     ctx.translate(off.x, off.y);
  37     ctx.strokeStyle = 'rgba(215, 215, 215, .3)';
  38     var grid = new HexGrid(27, 27, 20, 0);
  39     console.log(grid.cap)
  40     grid.strokeAll(ctx);
  41
  42     function getPos( e )
  43     {
  44         return new Point(e.clientX - e.target.offsetLeft, e.clientY - e.target.offsetTop);
  45     }
  46
  47     function time() {
  48         return (new Date()).getTime();
  49     }
  50
  51     function click( e )
  52     {
  53         var start = time();
  54         var pos = getPos(e);
  55
  56         ctx.clearRect(-off.x, -off.y, 800, 500)
  57
  58         var coords = grid.getAt(pos.x - off.x, pos.y - off.y);
  59         var i = coords[0], j = coords[1];
  60         ctx.fillStyle = 'rgba(155, 266, 200, .8)';
  61         grid.fill(i, j, ctx);
  62         grid.strokeAll(ctx);
  63         console.log(time() - start);
  64     }
  65
  66     document.getElementById('target').addEventListener('mousemove', click, false);//.onclick = click;
  67
  68 </script>
  69 </body>
  70 </html>