SHARE
TWEET

Untitled

a guest Jul 22nd, 2019 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE HTML>
  2. <html>
  3.  <head>
  4.   <meta charset="utf-8">
  5.   <title>Hexagons on canvas</title>
  6.  </head>
  7. <body>
  8.  
  9. <canvas id="hexagonCanvas" width="560" height="400"
  10.  style="border: 0; display: block; margin: 0 auto;">
  11. </canvas>
  12. <script type="text/javascript">
  13. (function() {
  14.  var canvas = document.getElementById('hexagonCanvas');
  15.  var hexHeight,
  16.      hexRadius,
  17.      hexRectangleHeight,
  18.      hexRectangleWidth,
  19.      hexagonAngle = 0.523598776, //30 градусов в радианах
  20.      sideLength = 32, //длина стороны, пискелов
  21.      boardWidth = 8, //ширина "доски" по вертикали
  22.      boardHeight = 8; //высота "доски" по вертикали
  23.  
  24.  hexHeight = Math.sin(hexagonAngle) * sideLength;
  25.  hexRadius = Math.cos(hexagonAngle) * sideLength;
  26.  hexRectangleHeight = sideLength + 2 * hexHeight;
  27.  hexRectangleWidth = 2 * hexRadius;
  28.  
  29.  if (canvas.getContext) {
  30.   var ctx = canvas.getContext('2d');
  31.   ctx.fillStyle = "#000000";
  32.   ctx.strokeStyle = "#333333";
  33.   ctx.lineWidth = 2;
  34.   drawBoard(ctx, boardWidth, boardHeight); //первичная отрисовка
  35.   canvas.addEventListener("mousemove", function(eventInfo) { //слушатель перемещения мыши
  36.    var x = eventInfo.offsetX || eventInfo.layerX;
  37.    var y = eventInfo.offsetY || eventInfo.layerY;
  38.    var hexY = Math.floor(y / (hexHeight + sideLength));
  39.    var hexX = Math.floor((x - (hexY % 2) * hexRadius) / hexRectangleWidth);
  40.    var screenX = hexX * hexRectangleWidth + ((hexY % 2) * hexRadius);
  41.    var screenY = hexY * (hexHeight + sideLength);
  42.    ctx.clearRect(0, 0, canvas.width, canvas.height);
  43.    drawBoard(ctx, boardWidth, boardHeight); //перерисовка на mousemove
  44.    //На доске ли координаты грызуна?
  45.    if (hexX >= -boardWidth/2 && hexX <= boardWidth) {
  46.     if (hexY >= -boardHeight/2 && hexY <= boardHeight) {
  47.      ctx.fillStyle = "#008000";
  48.      drawHexagon (ctx, screenX, screenY, true);
  49.     }
  50.    }
  51.   });
  52.  }
  53.  
  54.  function drawBoard (canvasContext, width, height) {
  55.   for (var i = 0; i < width; i++) {
  56.    for (var j = 0; j < height; j++) {
  57.     drawHexagon (ctx, i * hexRectangleWidth + ((j % 2) * hexRadius),
  58.      j * (sideLength + hexHeight), false);
  59.    }
  60.   }
  61.  }
  62.  
  63.  function drawHexagon (canvasContext, x, y, fill) {          
  64.   var fill = fill || false;
  65.   canvasContext.beginPath();
  66.   canvasContext.moveTo (x + hexRadius, y);
  67.   canvasContext.lineTo (x + hexRectangleWidth, y + hexHeight);
  68.   canvasContext.lineTo (x + hexRectangleWidth, y + hexHeight + sideLength);
  69.   canvasContext.lineTo (x + hexRadius, y + hexRectangleHeight);
  70.   canvasContext.lineTo (x, y + sideLength + hexHeight);
  71.   canvasContext.lineTo (x, y + hexHeight);
  72.   canvasContext.closePath();
  73.   if (fill) canvasContext.fill();
  74.   else canvasContext.stroke();
  75.  }
  76. })();
  77. </script>
  78. <noscript><div>Извините, требуется включённый Javascript для работы приложения!</div></noscript>
  79.  
  80. </body></html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top