• Sign Up
• Login
• API
• FAQ
• Tools
• Archive
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.

Top