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.
(https://i.imgur.com/CXpX1WE.png)
Se crearon con el siguiente codigo.
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
https://tympanus.net/codrops/2016/05/03/animated-heat-distortion-effects-webgl/
Supongo que eso te pueda servir.
Saludos
Gracias, le estoy dando una leída y me da una buena dirección para realizar los cálculos de la distorsión.
Gracias