elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Curso de javascript por TickTack


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Efectos sobre Canvas HTML5
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Efectos sobre Canvas HTML5  (Leído 1,943 veces)
AlbertoBSD
Programador y
Moderador Global
***
Desconectado Desconectado

Mensajes: 3.705


🏴 Libertad!!!!!


Ver Perfil WWW
Efectos sobre Canvas HTML5
« en: 6 Noviembre 2018, 16:18 pm »

Muy buen dia compañeros.

Estoy tratando de crear un tipo de efectos sobre un Canvas de HTML5.

El canavas actualmente tiene una imagen creada mediante javascript consiste en las clasicas Barras de Colores que salian en la televisión.




Se crearon con el siguiente codigo.
Código
  1. var canvas = document.getElementById("bars");
  2. var ctx = canvas.getContext("2d");
  3. var colores = ["white", "yellow","cyan", "lime","magenta","red","blue"];
  4. var colores2 =["blue","black","magenta","black","cyan","black","white"];
  5.  
  6. var i;
  7. i = 0;
  8. while(i < 7) {
  9. ctx.fillStyle = colores[i];
  10. ctx.fillRect(i*182,0,(i+1)*182,537);
  11. i++;
  12. }
  13. i = 0;
  14. while(i < 7) {
  15. ctx.fillStyle = colores2[i];
  16. ctx.fillRect(i*182,537,(i+1)*182,72);
  17. i++;
  18. }
  19. // Create gradient
  20. var grd=ctx.createLinearGradient(0,0,1274,115);
  21. grd.addColorStop(0,"white");
  22. grd.addColorStop(1,"black");
  23.  
  24. // Fill with gradient
  25. ctx.fillStyle=grd;
  26. ctx.fillRect(0,609,1274,115);
  27.  

Y queria crear una animación asi tipo distorción.

No se que tipo de operaciones realizar en el canvas, primero pensé en agregarle alguna capa de blur

Pero preguntar aqui por si alguien ya a hecho algo similar en el Canvas HTML

Saludos


« Última modificación: 6 Noviembre 2018, 16:33 pm por AlbertoBSD » En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Efectos sobre Canvas HTML5
« Respuesta #1 en: 11 Noviembre 2018, 18:30 pm »

https://tympanus.net/codrops/2016/05/03/animated-heat-distortion-effects-webgl/

Supongo que eso te pueda servir.

Saludos


En línea

AlbertoBSD
Programador y
Moderador Global
***
Desconectado Desconectado

Mensajes: 3.705


🏴 Libertad!!!!!


Ver Perfil WWW
Re: Efectos sobre Canvas HTML5
« Respuesta #2 en: 12 Noviembre 2018, 21:49 pm »

Gracias, le estoy dando una leída y me da una buena dirección para realizar los cálculos de la distorsión.

Gracias
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Ayuda con bugs en PONG (html5<canvas> + javascript)
Desarrollo Web
pony012 0 2,641 Último mensaje 7 Julio 2010, 06:41 am
por pony012
Empezando con html5 y canvas. Juego "simon dice"
Desarrollo Web
ltbl 2 4,541 Último mensaje 23 Enero 2011, 14:34 pm
por ltbl
[LIBRERIA] Pagina con impresionantes efectos en HTML5 y explican como hacerlos
Desarrollo Web
Graphixx 1 1,898 Último mensaje 18 Mayo 2014, 08:51 am
por Camarografo77
Efecto "Motion Blur" - html5 canvas VBScript
Scripting
John1Connor 0 4,866 Último mensaje 23 Julio 2015, 08:34 am
por John1Connor
Duda sobre el canvas html5
Desarrollo Web
kakashi20 0 1,650 Último mensaje 5 Octubre 2015, 16:09 pm
por kakashi20
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines