daily pastebin goal
1%
SHARE
TWEET

Untitled

a guest Jun 30th, 2013 154 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html5>
  2. <html>
  3. <body>
  4. <canvas id ="canvas1" width="400" height="300" style="border:5px solid black;">
  5. </canvas>
  6. </body>
  7. </html>
  8. <script language="javascript" type="text/javascript">
  9. var c1=document.getElementById("canvas1");
  10. var pinceau=c1.getContext("2d");
  11.  
  12. var unit = 40; // longueur d'un coté de l'hexagone
  13. trace_map(pinceau, unit); //tracer la carte hexa (mis en fonction pour lisibilité)
  14. var offset_y = 2; // décalage vertical du y=0 pour ne pas l'avoir en haut du graphe
  15. add_coordinates(pinceau, offset_y);
  16.  
  17.  
  18.  
  19.  
  20. /*========================== fonctions ============================================*/
  21.  
  22. /** add coordinates in each block of the hexagonal map
  23.   la barre des X est inclinée, mais ça se comporte comme un système de coordonnées carthésien
  24.  
  25.  @param pinceau : type returned by a .getContext("2d") call
  26.  @param offset_y : shift (in number of block) of the vertical (Y) origin
  27. */
  28. function add_coordinates(pinceau, offset_y) {
  29.  
  30.    var sin_unit = unit * Math.sin(30*Math.PI/180);
  31.    var cos_unit = unit * Math.cos(30*Math.PI/180);
  32.  
  33.    /* ---- tracer les lignes de repère ---- */
  34.    pinceau.beginPath();
  35.    //axe Y (vertical)
  36.    pinceau.moveTo(sin_unit + unit/2, 0);
  37.    pinceau.lineTo(sin_unit + unit/2, c1.height);
  38.  
  39.    //axe X (incliné)
  40.    //le +0.4 est pour que la ligne soit ~verticalement centrée dans les hexagones
  41.    var vertical_offset = (offset_y * 2 + 0.4)* cos_unit;
  42.    pinceau.moveTo(0, vertical_offset);
  43.    pinceau.lineTo(c1.width, vertical_offset + c1.width * (cos_unit / (unit + sin_unit)) );
  44.  
  45.    pinceau.lineWidth = 5;
  46.    pinceau.strokeStyle = "#BBF"; //bleu clair
  47.    pinceau.stroke();
  48.  
  49.  
  50.    /* ---- ajout coordonnées dans chaque case ---- */
  51.  
  52.    pinceau.beginPath();
  53.    pinceau.font = '10pt Calibri';
  54.    pinceau.textAlign = 'center';
  55.    pinceau.fillStyle = 'green';
  56.  
  57.    //point de départ horizontal (la case la plus haute d'une colonne sur deux)
  58.    //sur une meme 'ligne', la valeur Y ne bouge pas (puisque c'est axe vertical)
  59.    count_x = 0;
  60.    count_y = offset_y;
  61.    for(w = sin_unit + unit/2 ; w < c1.width ; w += 2 * (unit + sin_unit) ) {
  62.       temp_x = count_x;
  63.       //la distance entre le centre de 2 cases successives est de :
  64.       //-horizontalement : unit + unit*sin(30°)
  65.       //-verticalement   : unit*cos(30°)
  66.       for(width = w, h = cos_unit ; width < c1.width && h < c1.height ; width += unit + sin_unit, h += cos_unit ) {
  67.          pinceau.fillText("y"+count_y+"x"+temp_x, width, h);
  68.          temp_x ++;
  69.       }
  70.       count_x += 2;
  71.       count_y ++;
  72.    }
  73.  
  74.    //point de départ vertical (chaque case de l'axe vertical, sauf la 1ere qui a déjà été remplie par l'autre boucle)
  75.    count_y = offset_y - 1;
  76.  
  77.    for( h = 3 * cos_unit ; h < c1.height ; h += 2 * cos_unit ) {
  78.       count_x = 0;
  79.       for( w = sin_unit + unit/2, height = h ; w < c1.width && height < c1.height ; w += unit + sin_unit, height += cos_unit  ) {
  80.          pinceau.fillText("y"+count_y+"x"+count_x, w, height);
  81.          count_x ++;
  82.       }
  83.       count_y --;
  84.    }
  85.  
  86.    pinceau.stroke();
  87. }
  88.  
  89.  
  90.  
  91.  
  92. /** draws an hexagon blocks map
  93.  
  94.    @param pinceau : type returned by a .getContext("2d") call
  95.    @param unit : length of a side of the hexagon
  96. */
  97. function trace_map(pinceau, unit) {
  98.  
  99.    pinceau.beginPath();
  100.  
  101.    var sin_unit = unit * Math.sin(30*Math.PI/180);
  102.    var cos_unit = unit * Math.cos(30*Math.PI/180);
  103.  
  104.    //trace the diagonals
  105.    var count = 0;
  106.  
  107.    for(var w = 0 ; w < c1.width ; w += unit + sin_unit) {
  108.       if( count % 2 == 1) {
  109.          pinceau.moveTo(w , 0); //point de depart
  110.          for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
  111.             pinceau.lineTo(w + sin_unit , h + cos_unit); /* \ */
  112.             pinceau.lineTo(w , h + 2 * cos_unit);        /* / */
  113.          }
  114.       } else {
  115.          pinceau.moveTo(w + sin_unit, 0); //point de depart
  116.          for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
  117.             pinceau.lineTo(w , h + cos_unit);               /* / */
  118.             pinceau.lineTo(w + sin_unit, h + 2 * cos_unit); /* \ */
  119.          }
  120.       }
  121.       count++;
  122.    }
  123.  
  124.    //trace the lines
  125.    count = 0;
  126.  
  127.    for(var w = 0 ; w < c1.width ; w += unit + sin_unit) {
  128.       if( count % 2 == 1) {
  129.          for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
  130.             pinceau.moveTo(w + sin_unit, h + cos_unit); //point de depart
  131.             pinceau.lineTo(w + sin_unit + unit , h + cos_unit);
  132.          }
  133.       } else {
  134.          for(var h = cos_unit ; h < c1.height ; h += 2 * cos_unit) {
  135.             pinceau.moveTo(w + sin_unit, h + cos_unit); //point de depart
  136.             pinceau.lineTo(w + sin_unit + unit , h + cos_unit);
  137.          }
  138.       }
  139.       count++;
  140.    }
  141.    pinceau.stroke();
  142. }
  143. </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