git.r.bdr.sh / rbdr / r.bdr.sh / blame
| Commit | Line | Data |
|---|---|---|
| 5cf1339e BB |
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> | |
| 3 | <head> | |
| 4 | <title>Juegos Pasados</title> | |
| 5 | <style type="text/css"> | |
| 6 | *{ | |
| 7 | padding: 0; | |
| 8 | margin: 0; | |
| 9 | } | |
| 10 | ||
| 11 | body{ | |
| 12 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| 13 | } | |
| 14 | ||
| 15 | #container{ | |
| 16 | width:2050px; | |
| 17 | text-align: left; | |
| 18 | } | |
| 19 | ||
| 20 | h1{ | |
| 21 | color: #c00; | |
| 22 | margin-top: 50px; | |
| 23 | margin-left: 200px; | |
| 24 | font-size: 3em; | |
| 25 | width: 410px; | |
| 26 | } | |
| 27 | </style> | |
| 28 | <script type="text/javascript"> | |
| 29 | function draw(){ | |
| 30 | var canvas = document.getElementById('theCanvas'); | |
| 31 | var context = canvas.getContext('2d'); | |
| 32 | ||
| 33 | var users = [ | |
| 34 | ["Javier...",15], | |
| 35 | ["Chicholo",41], | |
| 36 | ["pavokun",15], | |
| 37 | ["Bortron",14], | |
| 38 | ["Guitarhard",12], | |
| 39 | ["Paco",51], | |
| 40 | ["Ogu",31], | |
| 41 | ["Socially Inept",25], | |
| 42 | ["Anonymous-San",9], | |
| 43 | ["xX AEVM Xx",11], | |
| 44 | ["Rocco93",10], | |
| 45 | ["Shingo Yabuki",24], | |
| 46 | ["Crizz_ToonZurfex",11], | |
| 47 | ["o0 IDA IK1NG 0o",4], | |
| 48 | ["Dgtlman",9], | |
| 49 | ["Angelical Taco",1], | |
| 50 | ["oscar011291",17], | |
| 51 | ["Jurgen2.0",4], | |
| 52 | ["Elcompaniero",3], | |
| 53 | ["Wastelandgamer",8], | |
| 54 | ["LgpMcFly",2], | |
| 55 | ["Oskar",4], | |
| 56 | ["lucasteh5th",18], | |
| 57 | ["Shava",1], | |
| 58 | ["Sens0",3], | |
| 59 | ["Leon-o",1], | |
| 60 | ["sau",2], | |
| 61 | ["Wakko",2], | |
| 62 | ["sarnoso",5], | |
| 63 | ["Anyki",1], | |
| 64 | ["Loose",26], | |
| 65 | ["Serial",11], | |
| 66 | ["Joe",25], | |
| 67 | ["Makusan",3], | |
| 68 | ["Roberto",4], | |
| 69 | ["Ghosth",1], | |
| 70 | ["Lufero",1], | |
| 71 | ["Anji",4], | |
| 72 | ["Ky3r0z",8], | |
| 73 | ["Kobo",1], | |
| 74 | ["Nightmare",30] | |
| 75 | ] | |
| 76 | var gradient; | |
| 77 | for(var i=0;i<=60;i+=10){ | |
| 78 | ||
| 79 | context.strokeStyle = "rgb(225,225,225)"; | |
| 80 | context.beginPath(); | |
| 81 | context.moveTo(0,400-15-(i*5)); | |
| 82 | context.lineTo(4100,400-15-(i*5)); | |
| 83 | context.stroke(); | |
| 84 | ||
| 85 | } | |
| 86 | ||
| 87 | for(var i = 0;i < users.length; i++){ | |
| 88 | ||
| 89 | gradient = context.createLinearGradient(100*i, 400, 100*i, 400-(users[i][1]*5)); | |
| 90 | gradient.addColorStop(0, "rgb(34,34,34)"); | |
| 91 | gradient.addColorStop(1, "rgb(43,43,43)"); | |
| 92 | ||
| 93 | context.fillStyle = gradient; | |
| 94 | context.fillRect (100*i,400-15-(users[i][1]*5),100,(users[i][1]*5)+15); | |
| 95 | ||
| 96 | context.font = "8pt Helvetica"; | |
| 97 | context.fillStyle = "rgb(255,255,255)"; | |
| 98 | context.fillText(users[i][0], (100*i)+5, 400-(users[i][1]*5)); | |
| 99 | context.fillStyle = "rgb(204,0,0)"; | |
| 100 | context.fillText("("+users[i][1]+")", (100*i)+5, 400-20-(users[i][1]*5)); | |
| 101 | } | |
| 102 | ||
| 103 | } | |
| 104 | </script> | |
| 105 | </head> | |
| 106 | <body onload="draw();"> | |
| 107 | <div id="container"> | |
| 108 | <h1>Juegos Pasados Per Capita. (2009)</h1> | |
| 109 | <canvas id="theCanvas" width="4100px" height="400px"></canvas> | |
| 110 | </div> | |
| 111 | </body> | |
| 112 | </html> |