[Resolvido] Script pronto mas...

[M4n0w4r 0]

Olá galera, fiz um script que faz preenchimento de arco nas laterais de um elemento, eu posso colocar isso aonde eu quiser mas nesse exemplo eu coloquei em todos os lugares possíveis:

 

 

Ae você pergunta:

 

- Para que eu vou usar isso ?

 

Bom, se eu colocar esse preenchimento apenas nas laterais horizontais superiores eu vou ter isso:

 

 

Se eu colocar nas laterais verticais da esquerda:

 

 

E da para brincar mais um pouco com menus Drop Down:

 

 

Eu so peço que melhorem o código, focando rapidez no processamento, estética para melhor vizualização, e novas funcionalidades. Há também um problema grave, se o usuário redimensionar a página para maior ou menor os preenchimentos não se reajustam.

 

/*
	Script funciona apenas em navegadores que seguem os padrões W3C e WHATWG.
	Já que a Microsoft segue apenas o seu própio nariz o IE não é suportado
*/

Element.prototype.pegaEstilo = function (parametro, tira_letras) {
	valor = document.defaultView.getComputedStyle (this, null).getPropertyValue (parametro);
	
	if (tira_letras === true) {
		var valor_sem_letras = "";
		
		for (var i = 0; i < valor.length; i ++) {
			if (! isNaN (valor.charAt (i)) || valor.charAt (i) == ".") {
				valor_sem_letras = valor_sem_letras + valor.charAt (i);
			}
		}
		
		return parseFloat (valor);
	}
	else {
		return valor;
	}
}

Element.prototype.leftTop = function () {
	var x = this.offsetLeft;
	var y = this.offsetTop;
	
	var elemento = this.offsetParent;
	
	while (elemento !== null) {
		x = parseInt (x) + parseInt (elemento.offsetLeft);
		y = parseInt (y) + parseInt (elemento.offsetTop);
		
		elemento = elemento.offsetParent;
	}
	
	return new Array (x, y);
}

function bordaExterna (elemento, alturaLargura) {
	var left_top = elemento.leftTop ();
	
	var generico = function (x, y, cor, tipo) {
		var canvas = document.createElement ("canvas");
			canvas.style.left = x + "px";
			canvas.style.position = "absolute";
			canvas.style.top = y + "px";
			canvas.setAttribute ("height", alturaLargura + "px;")
			canvas.setAttribute ("width", alturaLargura + "px;")
		
		var contexto = canvas.getContext ("2d");
			contexto.beginPath ();
				if (tipo === "noroeste") {
					contexto.moveTo (alturaLargura, alturaLargura);
					contexto.lineTo (0, alturaLargura);
					contexto.quadraticCurveTo (alturaLargura, alturaLargura, alturaLargura, 0);
				}
				else if (tipo === "nordeste") {
					contexto.moveTo (0, alturaLargura);
					contexto.lineTo (alturaLargura, alturaLargura);
					contexto.quadraticCurveTo (0, alturaLargura, 0, 0);
				}
				else if (tipo === "sudeste") {
					contexto.moveTo (0, 0);
					contexto.lineTo (alturaLargura, 0);
					contexto.quadraticCurveTo (0, 0, 0, alturaLargura);
				}
				else if (tipo === "sudoeste") {
					contexto.moveTo (alturaLargura, 0);
					contexto.lineTo (0, 0);
					contexto.quadraticCurveTo (alturaLargura, 0, alturaLargura, alturaLargura);
				}
			contexto.closePath ();
			
			contexto.fillStyle = cor;
			contexto.fill ();
			
		document.body.appendChild (canvas);
	}
	
	this.onde = function (tipos) {
		var alturaPai = elemento.pegaEstilo ("height", true);
		var esquerda;
		var larguraPai = elemento.pegaEstilo ("width", true);
		var topo;
		
		var corDireita = elemento.pegaEstilo ("border-right-color");
		var corEsquerda = elemento.pegaEstilo ("border-left-color");
		var corInferior = elemento.pegaEstilo ("border-bottom-color");
		var corSuperior = elemento.pegaEstilo ("border-top-color");
		
		var tamanhoDireita = elemento.pegaEstilo ("border-right-width", true);
		var tamanhoEsquerda = elemento.pegaEstilo ("border-left-width", true);
		var tamanhoInferior = elemento.pegaEstilo ("border-bottom-width", true);
		var tamanhoSuperior = elemento.pegaEstilo ("border-top-width", true);
		
		if (/0/.exec (tipos)) {
			esquerda = left_top[0];
			topo = left_top[1] - alturaLargura;
			
			generico (esquerda, topo, corSuperior, "nordeste");
		}
		
		if (/1/.exec (tipos)) {
			esquerda = left_top[0] - alturaLargura;
			topo = left_top[1];
			
			generico (esquerda, topo, corEsquerda, "sudoeste");
		}
		
		if (/2/.exec (tipos)) {
			esquerda = (left_top[0] + larguraPai + tamanhoDireita + tamanhoEsquerda) - alturaLargura;
			topo = left_top[1] - alturaLargura;
			
			generico (esquerda, topo, corSuperior, "noroeste");
		}
		
		if (/3/.exec (tipos)) {
			esquerda = left_top[0] + larguraPai + tamanhoDireita + tamanhoEsquerda;
			topo = left_top[1];
			
			generico (esquerda, topo, corDireita, "sudeste");
		}
		
		if (/4/.exec (tipos)) {
			esquerda = left_top[0] - alturaLargura;
			topo = left_top[1] + alturaPai + tamanhoInferior + tamanhoSuperior - alturaLargura;
			
			generico (esquerda, topo, corEsquerda, "noroeste");
		}
		
		if (/5/.exec (tipos)) {
			esquerda = left_top[0];	
			topo = left_top[1] + alturaPai + tamanhoInferior + tamanhoSuperior;
			
			generico (esquerda, topo, corInferior, "sudeste");
		}
		
		if (/6/.exec (tipos)) {
			esquerda = left_top[0] + larguraPai + tamanhoDireita + tamanhoEsquerda;
			topo = left_top[1] + alturaPai + tamanhoInferior + tamanhoSuperior - alturaLargura;
			
			generico (esquerda, topo, corDireita, "nordeste");
		}
		
		if (/7/.exec (tipos)) {
			esquerda = left_top[0] + larguraPai + tamanhoDireita + tamanhoEsquerda - alturaLargura;
			topo = left_top[1] + alturaPai + tamanhoInferior + tamanhoSuperior;
			
			generico (esquerda, topo, corInferior, "sudoeste");
		}
	}
}

// Exemplo de utilização

var borda = new bordaExterna (document.getElementById ("meuElemento"), 20)
borda.onde ("0123456");

Vlwwwwwwwwwwwww, flowwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww