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
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