Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement