daily pastebin goal
50%
SHARE
TWEET

Untitled

darkoneko Jun 30th, 2013 132 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html5>
  2. <html>
  3. <head> <meta charset="UTF-8" /> </head>
  4. <body>
  5. <canvas id ="canvas1" width="400" height="300" style="border:5px solid black;">
  6. </canvas>
  7. </body>
  8. </html>
  9. <script language="javascript" type="text/javascript">
  10. //!\ nombreuses variables réutilisées dans les fonctions par effet "scope chain".
  11. var c1=document.getElementById("canvas1");
  12. var pinceau=c1.getContext("2d");
  13.  
  14. var unit = 40; // longueur d'un coté de l'hexagone
  15.  
  16. var sin_unit = unit * Math.sin(30*Math.PI/180);
  17. var cos_unit = unit * Math.cos(30*Math.PI/180);
  18.  
  19. //point d'origine du plan canvas, defini manuellement
  20. var origin_y = 5 * cos_unit; // 2 * cos_unit per block + half a block to reach the center of it.
  21. var origin_x = sin_unit + unit/2; //half a block's length
  22.  
  23.  
  24. trace_map();
  25. trace_hexa_system();
  26.  
  27. pinceau.beginPath();
  28. pinceau.font = '12pt Calibri';
  29. pinceau.textAlign = 'center';
  30. pinceau.fillStyle = 'green';
  31.  
  32. var coord = coordinates_hexa_to_canvas(0, 0 )
  33. pinceau.fillText("0+0", coord.x, coord.y);
  34.  
  35. coord = coordinates_hexa_to_canvas(1, 2 )
  36. pinceau.fillText("y1;x2", coord.x, coord.y);
  37.  
  38. coord = coordinates_hexa_to_canvas(3, 2 )
  39. pinceau.fillText("y3;x2", coord.x, coord.y);
  40.  
  41. coord = coordinates_hexa_to_canvas(4, 4)
  42. pinceau.fillText("y4;x4", coord.x, coord.y);
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49. /*========================== fonctions ============================================*/
  50.  
  51. function coordinates_hexa_to_canvas(wanted_y, wanted_x ) {
  52.    //j'aime pas le systeme de "scope chain" dans javascript, mais c'est ça ou 7 parametres
  53.    //variables "globales" utilisées : cos_unit, sin_unit, unit, origin_y, origin_x
  54.   var coordinates = [];
  55.    //vertical part. canvas system has Y inverted, so goes down as hexa coordinates go up.
  56.    coordinates.y = origin_y - (wanted_y * (2 * cos_unit));
  57.    //"horizontal" part
  58.    coordinates.y += + (wanted_x * cos_unit);
  59.    coordinates.x = origin_x + (wanted_x * (unit + sin_unit));
  60.  
  61.    return coordinates;
  62. }
  63.  
  64.  
  65.  
  66. function trace_hexa_system() {
  67.    //variables "globales" utilisées : c1, pinceau, cos_unit, sin_unit, unit
  68.    pinceau.beginPath();
  69.    //axe Y (vertical)
  70.    pinceau.moveTo(unit/2 + sin_unit, 0);
  71.    pinceau.lineTo(unit/2 + sin_unit, c1.height);
  72.    //axe X
  73.    pinceau.moveTo(0, (4 + 0.4) * cos_unit);
  74.    pinceau.lineTo(c1.width, (4 + 0.4) * cos_unit + c1.width * (cos_unit / (unit + sin_unit)) );
  75.  
  76.    pinceau.lineWidth = 5;
  77.    pinceau.strokeStyle = "#BBF"; //bleu clair
  78.    pinceau.stroke();
  79.  
  80. }
  81.  
  82.  
  83. /** draws an hexagon blocks map
  84.  
  85.    @param pinceau : type returned by a .getContext("2d") call
  86.    @param unit : length of a side of the hexagon
  87. */
  88. function trace_map() {
  89.    //variables "globales" utilisées : c1, pinceau, cos_unit, sin_unit, unit
  90.  
  91.    pinceau.beginPath();
  92.  
  93.    //trace the diagonals
  94.    var count = 0;
  95.  
  96.    for(var w = 0 ; w < c1.width ; w += unit + sin_unit) {
  97.       if( count % 2 == 1) {
  98.          pinceau.moveTo(w , 0); //point de depart
  99.          for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
  100.             pinceau.lineTo(w + sin_unit , h + cos_unit); /* \ */
  101.             pinceau.lineTo(w , h + 2 * cos_unit);        /* / */
  102.          }
  103.       } else {
  104.          pinceau.moveTo(w + sin_unit, 0); //point de depart
  105.          for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
  106.             pinceau.lineTo(w , h + cos_unit);               /* / */
  107.             pinceau.lineTo(w + sin_unit, h + 2 * cos_unit); /* \ */
  108.          }
  109.       }
  110.       count++;
  111.    }
  112.  
  113.    //trace the lines
  114.    count = 0;
  115.  
  116.    for(var w = 0 ; w < c1.width ; w += unit + sin_unit) {
  117.       if( count % 2 == 1) {
  118.          for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
  119.             pinceau.moveTo(w + sin_unit, h + cos_unit); //point de depart
  120.             pinceau.lineTo(w + sin_unit + unit , h + cos_unit);
  121.          }
  122.       } else {
  123.          for(var h = cos_unit ; h < c1.height ; h += 2 * cos_unit) {
  124.             pinceau.moveTo(w + sin_unit, h + cos_unit); //point de depart
  125.             pinceau.lineTo(w + sin_unit + unit , h + cos_unit);
  126.          }
  127.       }
  128.       count++;
  129.    }
  130.    pinceau.stroke();
  131. }
  132. </script>
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