Efectos sobre Canvas HTML5

[AlbertoBSD]

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 (javascript) [Seleccionar] Expandir


var canvas = document.getElementById("bars");
var ctx = canvas.getContext("2d");
var colores = ["white", "yellow","cyan", "lime","magenta","red","blue"];
var colores2 =["blue","black","magenta","black","cyan","black","white"];

var i;
i = 0;
while(i < 7) {
ctx.fillStyle = colores[i];
ctx.fillRect(i*182,0,(i+1)*182,537);
i++;
}
i = 0;
while(i < 7) {
ctx.fillStyle = colores2[i];
ctx.fillRect(i*182,537,(i+1)*182,72);
i++;
}
// Create gradient
var grd=ctx.createLinearGradient(0,0,1274,115);
grd.addColorStop(0,"white");
grd.addColorStop(1,"black");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(0,609,1274,115);


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

[#!drvy]

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

Supongo que eso te pueda servir.

Saludos

[AlbertoBSD]

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

Gracias