SHARE
TWEET

Untitled

a guest Jul 23rd, 2019 61 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="1600" height="1000"></canvas>
  10. <script type="text/javascript">
  11.  
  12. (function() {
  13.  var canvas = document.getElementById('hexagonCanvas');
  14.  var hexHeight,
  15.      hexRadius,
  16.      hexRectangleHeight,
  17.      hexRectangleWidth,
  18.      hexagonAngle = 0.523598776, //30 градусов в радианах
  19.      sideLength = 16    , //длина стороны, пискелов
  20.      boardWidth = 16, //ширина "доски" по вертикали
  21.      boardHeight = 16; //высота "доски" по вертикали
  22.  
  23.  hexHeight = Math.sin(hexagonAngle) * sideLength;
  24.  hexRadius = Math.cos(hexagonAngle) * sideLength;
  25.  hexRectangleHeight = sideLength + 2 * hexHeight;
  26.  hexRectangleWidth = 2 * hexRadius;
  27.  
  28. // if (canvas.getContext) {
  29.   var ctx = canvas.getContext('2d');
  30.   ctx.fillStyle = "#000000";
  31.   ctx.strokeStyle = "#d2d2d2";
  32.   ctx.lineWidth = 2;
  33.   drawBoard(ctx, boardWidth, boardHeight); //первичная отрисовка
  34.   canvas.addEventListener("mousemove", function(eventInfo) { //слушатель перемещения мыши
  35.    var x = eventInfo.offsetX || eventInfo.layerX;
  36.    var y = eventInfo.offsetY || eventInfo.layerY;
  37.    var hexY = Math.floor(y / (hexHeight + sideLength));
  38.    var hexX = Math.floor((x - (hexY % 2) * hexRadius) / hexRectangleWidth);
  39.    var screenX = hexX * hexRectangleWidth + ((hexY % 2) * hexRadius);
  40.    var screenY = hexY * (hexHeight + sideLength);
  41.    ctx.clearRect(0, 0, canvas.width, canvas.height);
  42.    drawBoard(ctx, boardWidth, boardHeight); //перерисовка на mousemove
  43.    //На доске ли координаты грызуна?
  44.    //if (hexX >= -boardWidth/2 && hexX <= boardWidth) {
  45.     //if (hexY >= -boardHeight/2 && hexY <= boardHeight) {
  46.      ctx.fillStyle = "#4dfe4d";//
  47.      drawHexagon (ctx, screenX, screenY, true);
  48.     //}
  49.    //}
  50.   });
  51. //}
  52.  
  53.  function drawBoard (canvasContext, width, height) {
  54.   for (var i = 0; i < width*4; i++) {
  55.    for (var j = 0; j < height*4; j++) {
  56.     drawHexagon (ctx, i * hexRectangleWidth + ((j % 2) * hexRadius),
  57.      j * (sideLength + hexHeight), false);
  58.    }
  59.   }
  60.  }
  61.  
  62.  function drawHexagon (canvasContext, x, y, fill) {          
  63.   var fill = fill || false;
  64.   canvasContext.beginPath();
  65.   canvasContext.moveTo (x + hexRadius, y);
  66.   canvasContext.lineTo (x + hexRectangleWidth, y + hexHeight);
  67.   canvasContext.lineTo (x + hexRectangleWidth, y + hexHeight + sideLength);
  68.   canvasContext.lineTo (x + hexRadius, y + hexRectangleHeight);
  69.   canvasContext.lineTo (x, y + sideLength + hexHeight);
  70.   canvasContext.lineTo (x, y + hexHeight);
  71.   canvasContext.closePath();
  72.   if (fill) canvasContext.fill();
  73.   else canvasContext.stroke();
  74.  }
  75. })();
  76. </script>
  77. <noscript><div>Извините, требуется включённый Javascript для работы приложения!</div></noscript>
  78.  
  79. </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