Tema: Me puede colaborar cuadrando mi canvas como fondo. no se como meterlo
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 02/04/2013, 22:19
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Me puede colaborar cuadrando mi canvas como fondo. no se como meterlo
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>CodePen -- Pen</title>
  6. <style>
  7. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
  8. </style>
  9.  <style>
  10.   html, body {
  11.   margin: 0;
  12.   padding: 0;
  13.   width: 100%;
  14.   height: 100%;
  15.   overflow: hidden;
  16.   background: #111;
  17.   position: absolute;
  18.   z-index: 2;
  19. }
  20.  
  21. div#texto{
  22. font-size: 25pt;
  23. position: absolute;
  24. top: 0;
  25. left: 0;
  26. color: #FFF;
  27. z-index: 999;
  28. }
  29.  
  30. div#world{
  31. position: absolute;
  32. top: 0;
  33. left: 0;
  34. z-index: 1;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <canvas id="world"></canvas>
  40. <div id="texto">TEXTO</div>
  41. <script>
  42. (function() {
  43. var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;
  44.  
  45.   NUM_CONFETTI = 350;
  46.  
  47.   COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];
  48.  
  49.   PI_2 = 2 * Math.PI;
  50.  
  51.   canvas = document.getElementById("world");
  52.  
  53.   context = canvas.getContext("2d");
  54.  
  55.   window.w = 0;
  56.  
  57.   window.h = 0;
  58.  
  59.   resizeWindow = function() {
  60.     window.w = canvas.width = window.innerWidth;
  61.     return window.h = canvas.height = window.innerHeight;
  62.   };
  63.  
  64.   window.addEventListener('resize', resizeWindow, false);
  65.  
  66.   window.onload = function() {
  67.     return setTimeout(resizeWindow, 0);
  68.   };
  69.  
  70.   range = function(a, b) {
  71.     return (b - a) * Math.random() + a;
  72.   };
  73.  
  74.   drawCircle = function(x, y, r, style) {
  75.     context.beginPath();
  76.     context.arc(x, y, r, 0, PI_2, false);
  77.     context.fillStyle = style;
  78.     return context.fill();
  79.   };
  80.  
  81.   xpos = 0.5;
  82.  
  83.   document.onmousemove = function(e) {
  84.     return xpos = e.pageX / w;
  85.   };
  86.  
  87.   window.requestAnimationFrame = (function() {
  88.     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
  89.       return window.setTimeout(callback, 1000 / 60);
  90.     };
  91.   })();
  92.  
  93.   Confetti = (function() {
  94.  
  95.     function Confetti() {
  96.       this.style = COLORS[~~range(0, 5)];
  97.       this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
  98.       this.r = ~~range(2, 6);
  99.       this.r2 = 2 * this.r;
  100.       this.replace();
  101.     }
  102.  
  103.     Confetti.prototype.replace = function() {
  104.       this.opacity = 0;
  105.       this.dop = 0.03 * range(1, 4);
  106.       this.x = range(-this.r2, w - this.r2);
  107.       this.y = range(-20, h - this.r2);
  108.       this.xmax = w - this.r;
  109.       this.ymax = h - this.r;
  110.       this.vx = range(0, 2) + 8 * xpos - 5;
  111.       return this.vy = 0.7 * this.r + range(-1, 1);
  112.     };
  113.  
  114.     Confetti.prototype.draw = function() {
  115.       var _ref;
  116.       this.x += this.vx;
  117.       this.y += this.vy;
  118.       this.opacity += this.dop;
  119.       if (this.opacity > 1) {
  120.         this.opacity = 1;
  121.         this.dop *= -1;
  122.       }
  123.       if (this.opacity < 0 || this.y > this.ymax) this.replace();
  124.       if (!((0 < (_ref = this.x) && _ref < this.xmax))) {
  125.         this.x = (this.x + this.xmax) % this.xmax;
  126.       }
  127.       return drawCircle(~~this.x, ~~this.y, this.r, "" + this.rgb + "," + this.opacity + ")");
  128.     };
  129.  
  130.     return Confetti;
  131.  
  132.   })();
  133.  
  134.   confetti = (function() {
  135.     var _results;
  136.     _results = [];
  137.     for (i = 1; 1 <= NUM_CONFETTI ? i <= NUM_CONFETTI : i >= NUM_CONFETTI; 1 <= NUM_CONFETTI ? i++ : i--) {
  138.       _results.push(new Confetti);
  139.     }
  140.     return _results;
  141.   })();
  142.  
  143.   window.step = function() {
  144.     var c, _i, _len, _results;
  145.     requestAnimationFrame(step);
  146.     context.clearRect(0, 0, w, h);
  147.     _results = [];
  148.     for (_i = 0, _len = confetti.length; _i < _len; _i++) {
  149.       c = confetti[_i];
  150.       _results.push(c.draw());
  151.     }
  152.     return _results;
  153.   };
  154.  
  155.   step();
  156.  
  157. }).call(this);
  158.   </script>
  159. </body>
  160. </html>

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.