• API
• FAQ
• Tools
• Archive
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>
4.   <meta charset="utf-8">
5.   <title>Hexagons on canvas</title>
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,
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.

Top