git.r.bdr.sh - rbdr/r.bdr.sh/blob - jekyll/juegos2009.html

   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>