Интересный эффект с помощью canvas

Однажды что-то подобное уже видел, и захотелось попробовать самому сделать, вот сразу демка

С помощью этого скрипта можно залить и анимировать заливку канваса интересным образом, и если над ним разметить поле вода, например, или форму авторизации, и по событию focus, запускать радугу, а по blur - выключать, получается довольно красивый эффект.

Физические размеры канваса необходимо установить в стилях, так же лучше настроить внутри функцию под конкретный случай.
вот код:

var rainbow = function(width, height){
	//width И height - разрешение канваса в пикселах(не путать с физическими размерами, которые задаются в стилях)
	//Чтобы выглядело красивее, важно чтобы ширина относилась к высоте так же, как и в стилях для этого элемента
	//желательно цифры сильно не повышать иначе процессор грузит
	if(!width) width = 20;
	if(!height) height = 10;
	var step = 20;
	
	var fade = 0, switcher;
	var context, interval, fading;
	 //Возвращает массив всех чистых цветов(без серых оттенков) в формате rgba
	function getRainbow(){
		var rgb = [255,0,0];
		var rainbow = [];
		function rgbArray2Rgba(rgbArray){
			return "rgba("+rgbArray[0]+", "+rgbArray[1]+", "+rgbArray[2]+", 1)";
		}
		for(var i = 0; i < 3; i ++){
			if(i + 1 < 3){
				while(rgb[i + 1] < 255){		
					rainbow.push(rgbArray2Rgba(rgb));
					rgb[i + 1] ++;
				}
			} else {
				while(rgb[0] < 255){
					rainbow.push(rgbArray2Rgba(rgb));
					rgb[0] ++;
				}
			}
			while(rgb[i] > 0){
				rainbow.push(rgbArray2Rgba(rgb));
				rgb[i] --;
			}
		}		
		return rainbow;
	}	
	//сдвиг массива на num
	function shiftArray(arr, num){
		if(num >=0){
			for(var i = 0; i < num; i ++){
				var el = arr.shift();
				arr.push(el);
			}
		} else{
			for(var i = 0; i< Math.abs(num); i++){
				var el = arr.pop();
				arr.unshift(el);
			}
		}
	}
	//Установка прозрачности для rgba цвета
	function setRgbaOpacity(rgba, o){
		return rgba.slice(0, rgba.lastIndexOf(",")) + ", "+ o +")";
	}
	//return {
	this.cast = function(canvasElement){
			if(!canvasElement || !canvasElement.getContext){
				return false;	
			} else {
				context = canvasElement.getContext("2d");
				context.canvas.width = width;
				context.canvas.height = height;
				switcher = true;
			}
			function calcOpacity(x, y, blurWidth){
				var w = context.canvas.width;
				var h = context.canvas.height;
				if(blurWidth > 50) blurWidth = 50; else if(blurWidth < 0) blurWidth = 0;
				var min = h <= w ? h : w;
				var pwid = Math.round(min * blurWidth / 100);
				if(pwid < 1) return 1;
				var xO = x < pwid ? x : (w-1-x < pwid ? w-1-x : pwid);
				var yO = y < pwid ? y : (h-1-y < pwid ? h-1-y : pwid);
				return (xO * yO)/Math.pow(pwid, 2);
			}
			var color = getRainbow();
			var a = 35;
			//fade = 0;
			context.lineCap = "round";
			interval = window.setInterval(function(){
				context.canvas.width += 0;
				shiftArray(color, 7);
				for(var y = 0; y <context.canvas.height; y++){
					shiftArray(color, a);
					for(var x = 0; x < context.canvas.width; x ++){
						with(context){		
							beginPath();
								moveTo(x, y+0.5);					
								strokeStyle = setRgbaOpacity(color[x*20], calcOpacity(x, y, 15) * fade);
								lineTo(x+1, y+0.5);
								stroke();
							closePath();
						}
					}
				}
				if(fade < 1 && switcher) fade += 0.05;
				shiftArray(color, -a*(context.canvas.height));
			}, step);
		}
		this.stopMagic = function(){
			if(interval && context){
				switcher = false;
				fading = window.setInterval(function(){
					if(fade > 0 && !switcher){
						fade -= 0.05;
					} else {
						window.clearInterval(fading);				
						window.clearInterval(interval);
						context.canvas.width += 1;
						context.canvas.width -= 1;			
					}
				}, step);
			}
		}
	
}

Скачать