Untitled

<!DOCTYPE html5>
<html>
<head> <meta charset="UTF-8" /> </head>
<body>
<canvas id ="canvas1" width="400" height="300" style="border:5px solid black;">
</canvas>
</body>
</html>
<script language="javascript" type="text/javascript">
//!\ nombreuses variables réutilisées dans les fonctions par effet "scope chain".
var c1=document.getElementById("canvas1");
var pinceau=c1.getContext("2d");

var unit = 40; // longueur d'un coté de l'hexagone

var sin_unit = unit * Math.sin(30*Math.PI/180);
var cos_unit = unit * Math.cos(30*Math.PI/180);

//point d'origine du plan canvas, defini manuellement
var origin_y = 5 * cos_unit; // 2 * cos_unit per block + half a block to reach the center of it.
var origin_x = sin_unit + unit/2; //half a block's length


trace_map();
trace_hexa_system();

pinceau.beginPath();
pinceau.font = '12pt Calibri';
pinceau.textAlign = 'center';
pinceau.fillStyle = 'green';

var coord = coordinates_hexa_to_canvas(0, 0 )
pinceau.fillText("0+0", coord.x, coord.y);

coord = coordinates_hexa_to_canvas(1, 2 )
pinceau.fillText("y1;x2", coord.x, coord.y);

coord = coordinates_hexa_to_canvas(3, 2 )
pinceau.fillText("y3;x2", coord.x, coord.y);

coord = coordinates_hexa_to_canvas(4, 4)
pinceau.fillText("y4;x4", coord.x, coord.y);


/*========================== fonctions ============================================*/

function coordinates_hexa_to_canvas(wanted_y, wanted_x ) {
   //j'aime pas le systeme de "scope chain" dans javascript, mais c'est ça ou 7 parametres
   //variables "globales" utilisées : cos_unit, sin_unit, unit, origin_y, origin_x
  var coordinates = [];
   //vertical part. canvas system has Y inverted, so goes down as hexa coordinates go up.
   coordinates.y = origin_y - (wanted_y * (2 * cos_unit));
   //"horizontal" part
   coordinates.y += + (wanted_x * cos_unit);
   coordinates.x = origin_x + (wanted_x * (unit + sin_unit));

   return coordinates;
}


function trace_hexa_system() {
   //variables "globales" utilisées : c1, pinceau, cos_unit, sin_unit, unit
   pinceau.beginPath();
   //axe Y (vertical)
   pinceau.moveTo(unit/2 + sin_unit, 0);
   pinceau.lineTo(unit/2 + sin_unit, c1.height);
   //axe X
   pinceau.moveTo(0, (4 + 0.4) * cos_unit);
   pinceau.lineTo(c1.width, (4 + 0.4) * cos_unit + c1.width * (cos_unit / (unit + sin_unit)) );

   pinceau.lineWidth = 5;
   pinceau.strokeStyle = "#BBF"; //bleu clair
   pinceau.stroke();

}


/** draws an hexagon blocks map

   @param pinceau : type returned by a .getContext("2d") call
   @param unit : length of a side of the hexagon
*/
function trace_map() {
   //variables "globales" utilisées : c1, pinceau, cos_unit, sin_unit, unit

   pinceau.beginPath();

   //trace the diagonals
   var count = 0;

   for(var w = 0 ; w < c1.width ; w += unit + sin_unit) {
      if( count % 2 == 1) {
         pinceau.moveTo(w , 0); //point de depart
         for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
            pinceau.lineTo(w + sin_unit , h + cos_unit); /* \ */
            pinceau.lineTo(w , h + 2 * cos_unit);        /* / */
         }
      } else {
         pinceau.moveTo(w + sin_unit, 0); //point de depart
         for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
            pinceau.lineTo(w , h + cos_unit);               /* / */
            pinceau.lineTo(w + sin_unit, h + 2 * cos_unit); /* \ */
         }
      }
      count++;
   }

   //trace the lines
   count = 0;

   for(var w = 0 ; w < c1.width ; w += unit + sin_unit) {
      if( count % 2 == 1) {
         for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
            pinceau.moveTo(w + sin_unit, h + cos_unit); //point de depart
            pinceau.lineTo(w + sin_unit + unit , h + cos_unit);
         }
      } else {
         for(var h = cos_unit ; h < c1.height ; h += 2 * cos_unit) {
            pinceau.moveTo(w + sin_unit, h + cos_unit); //point de depart
            pinceau.lineTo(w + sin_unit + unit , h + cos_unit);
         }
      }
      count++;
   }
   pinceau.stroke();
}
</script>