| | 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> |
git.r.bdr.sh / rbdr / r.bdr.sh / blame_incremental