Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Me puede colaborar cuadrando mi canvas como fondo. no se como meterlo

Estas en el tema de Me puede colaborar cuadrando mi canvas como fondo. no se como meterlo en el foro de Javascript en Foros del Web. Buenas noches amigos. he intentado poner esta animacion de canvas que encontre aqui http://codepen.io/linrock/pen/Amdhr pero no he podido ponerlo de fondo, si lo pongo dentro ...
  #1 (permalink)  
Antiguo 02/04/2013, 21:42
 
Fecha de Ingreso: noviembre-2006
Mensajes: 83
Antigüedad: 15 años, 7 meses
Puntos: 2
Me puede colaborar cuadrando mi canvas como fondo. no se como meterlo

Buenas noches amigos.
he intentado poner esta animacion de canvas que encontre aqui
http://codepen.io/linrock/pen/Amdhr

pero no he podido ponerlo de fondo, si lo pongo dentro de mi contenedor me borra todo, alguien me echa la mano pa saber como ponerlo de fondo. les dejo la pagina para que le echen un vistaso, gracias
www.audienciastudio.com
  #2 (permalink)  
Antiguo 02/04/2013, 22:19
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años
Puntos: 1567
Respuesta: Me puede colaborar cuadrando mi canvas como fondo. no se como meterlo

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <title>CodePen -- Pen</title>
  4. 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}
  5.  <style>
  6.   html, body {
  7.   margin: 0;
  8.   padding: 0;
  9.   width: 100%;
  10.   height: 100%;
  11.   overflow: hidden;
  12.   background: #111;
  13.   position: absolute;
  14.   z-index: 2;
  15. }
  16.  
  17. div#texto{
  18. font-size: 25pt;
  19. position: absolute;
  20. top: 0;
  21. left: 0;
  22. color: #FFF;
  23. z-index: 999;
  24. }
  25.  
  26. div#world{
  27. position: absolute;
  28. top: 0;
  29. left: 0;
  30. z-index: 1;
  31. }
  32. </head>
  33. <canvas id="world"></canvas>
  34. <div id="texto">TEXTO</div>
  35. (function() {
  36. var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;
  37.  
  38.   NUM_CONFETTI = 350;
  39.  
  40.   COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];
  41.  
  42.   PI_2 = 2 * Math.PI;
  43.  
  44.   canvas = document.getElementById("world");
  45.  
  46.   context = canvas.getContext("2d");
  47.  
  48.   window.w = 0;
  49.  
  50.   window.h = 0;
  51.  
  52.   resizeWindow = function() {
  53.     window.w = canvas.width = window.innerWidth;
  54.     return window.h = canvas.height = window.innerHeight;
  55.   };
  56.  
  57.   window.addEventListener('resize', resizeWindow, false);
  58.  
  59.   window.onload = function() {
  60.     return setTimeout(resizeWindow, 0);
  61.   };
  62.  
  63.   range = function(a, b) {
  64.     return (b - a) * Math.random() + a;
  65.   };
  66.  
  67.   drawCircle = function(x, y, r, style) {
  68.     context.beginPath();
  69.     context.arc(x, y, r, 0, PI_2, false);
  70.     context.fillStyle = style;
  71.     return context.fill();
  72.   };
  73.  
  74.   xpos = 0.5;
  75.  
  76.   document.onmousemove = function(e) {
  77.     return xpos = e.pageX / w;
  78.   };
  79.  
  80.   window.requestAnimationFrame = (function() {
  81.     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
  82.       return window.setTimeout(callback, 1000 / 60);
  83.     };
  84.   })();
  85.  
  86.   Confetti = (function() {
  87.  
  88.     function Confetti() {
  89.       this.style = COLORS[~~range(0, 5)];
  90.       this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
  91.       this.r = ~~range(2, 6);
  92.       this.r2 = 2 * this.r;
  93.       this.replace();
  94.     }
  95.  
  96.     Confetti.prototype.replace = function() {
  97.       this.opacity = 0;
  98.       this.dop = 0.03 * range(1, 4);
  99.       this.x = range(-this.r2, w - this.r2);
  100.       this.y = range(-20, h - this.r2);
  101.       this.xmax = w - this.r;
  102.       this.ymax = h - this.r;
  103.       this.vx = range(0, 2) + 8 * xpos - 5;
  104.       return this.vy = 0.7 * this.r + range(-1, 1);
  105.     };
  106.  
  107.     Confetti.prototype.draw = function() {
  108.       var _ref;
  109.       this.x += this.vx;
  110.       this.y += this.vy;
  111.       this.opacity += this.dop;
  112.       if (this.opacity > 1) {
  113.         this.opacity = 1;
  114.         this.dop *= -1;
  115.       }
  116.       if (this.opacity < 0 || this.y > this.ymax) this.replace();
  117.       if (!((0 < (_ref = this.x) && _ref < this.xmax))) {
  118.        this.x = (this.x + this.xmax) % this.xmax;
  119.      }
  120.      return drawCircle(~~this.x, ~~this.y, this.r, "" + this.rgb + "," + this.opacity + ")");
  121.    };
  122.  
  123.    return Confetti;
  124.  
  125.  })();
  126.  
  127.  confetti = (function() {
  128.    var _results;
  129.    _results = [];
  130.    for (i = 1; 1 <= NUM_CONFETTI ? i <= NUM_CONFETTI : i >= NUM_CONFETTI; 1 <= NUM_CONFETTI ? i++ : i--) {
  131.      _results.push(new Confetti);
  132.    }
  133.    return _results;
  134.  })();
  135.  
  136.  window.step = function() {
  137.    var c, _i, _len, _results;
  138.    requestAnimationFrame(step);
  139.    context.clearRect(0, 0, w, h);
  140.    _results = [];
  141.    for (_i = 0, _len = confetti.length; _i < _len; _i++) {
  142.      c = confetti[_i];
  143.      _results.push(c.draw());
  144.    }
  145.    return _results;
  146.  };
  147.  
  148.  step();
  149.  
  150. }).call(this);
  151.  </script>
  152. </body>
  153. </html>

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 03/04/2013, 06:37
 
Fecha de Ingreso: noviembre-2006
Mensajes: 83
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: Me puede colaborar cuadrando mi canvas como fondo. no se como meterlo

gracias amigo..ahora estudiare el codigo

Etiquetas: canvas, colaborar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:27.