Desenhando em 3d com a tag Canvas em HTML5

Com processadores, browsers, placas de vídeo e motores de javascript e cada vez mais rápidos, hoje já vemos jogos e aplicações gráficas mais pesadas rodando direto no navegador, o Chrome que o diga, na sua loja de aplicativos. E apps / sites explorando 3d estão começando a aparecer por aí.

Num momento de mais tranquilidade aqui na agência, eu e Claudia Gusson resolvemos desenhar (ou pelo menos esboçar) nossa sala de trabalho, em 3d.

O resultado (parcial) foi esse:

O código fonte de tudo está aqui zipado.

Existem diversas libs pra isso, a que usamos foi essa desse exemplo aqui.

Dá bastante trabalho pois cada shape precisa ser escrito, um a um no JSON que a lib carrega, e não existe nenhuma ferramenta visual pra isso.

Funciona em FF, Chrome, Safari, IE9+ (a soma disso representa 82% no market sharet brasileiro atualmente)

Scroll não serve só para se fazer parallax

Menu que fixa no topo

http://www.carterdigital.com.au/

Scrollando o menu, ao invés de sumir após a dobra, é fixado no topo.

Menu que fixa no topo

Travando a sidebar pra não ficar buraco

http://9gag.com/

Em sites de paginação infinita, não tem como popular a coluna da direita pra encher de conteúdo até o fim do mundo.

O 9gag criou uma solução interessante, travando a coluna a partir de um determinado ponto do scroll.

O Facebook também fez isso.

Travando a sidebar pra não ficar buraco

Alterando o conteúdo

http://krystalrae.com/

Ao Scrollar, a modelo vai trocando de roupa

Alterando o conteúdo

Fixando o título / share ao lado do conteúdo

Mostrando conteúdo relacionado

http://mashable.com/2012/03/26/kaggle/

Na interna do mashable, eles detectam quando você acabou de ler um post (baseado no seu scroll top) e mostram um box com algum conteúdo relacionado.

Mostrando conteúdo relacionado

Como aplicar Blur numa imagem usando html5 / canvas

O efeito é o seguinte, pegar uma imagem e aplicar o efeito de blur usando somente javascript, sem carregar outra imagem.

Pra isso, é manipulado, pixel a pixel, colocando um pixel alpha por cima da imagem.

Veja a imagem original:

Blur em canvas

Imagem com filtro de Blur

Como a imagem é gerada automaticamente, dá pra aplicar o efeito no mousemove, ou em qualquer outra ação. Veja o exemplo abaixo.

Imagem com filtro de Blur no mousemove

Pro processamento ficar mais rápido, eu gerei um segundo canvas, só com pro efeito de criar a imagem dentro da máscara.

Todos os exemplos estão disponíveis aqui

Gráfico de Pizza interativo em HTML5 usando JavaScript e Canvas

Codando

O código é bem pequeno, fiz com menor número de linhas possíveis pra ficar bem legível.

html:

	<canvas id="pizza" width="400" height="400">
		Seu browser não suporta canvas
	</canvas>

javascript:

var Pizza = {

	// Configuração
	canvas:document.getElementById('pizza'),
	height:400,
	width:400,
	cor:'#293F8A',
	
	// Calculando variaveis pra desenhar
	_init:function(){
		Pizza.ctx = Pizza.canvas.getContext("2d");  
		Pizza.radius = Math.min(Pizza.width, Pizza.height) / 2;
		Pizza.center_x = Pizza.width/2;
		Pizza.center_y = Pizza.height/2;	
	},

	// Desenhando -  é só colocar Pizza._draw(60) pra desenhar 
	// o gráfico com 60% de ocupação
	_draw:function(percentual){
		Pizza.ctx.clearRect(0,0,Pizza.width,Pizza.height); 			
		Pizza.ctx.beginPath();
		Pizza.ctx.moveTo(Pizza.center_x, Pizza.center_y);
		Pizza.ctx.arc( 
			Pizza.center_x, 
			Pizza.center_y, 
			Pizza.radius, 
			Math.PI * (- 0.5), // inicio da fatia
			Math.PI * (- 0.5 + 2 * percentual/100), // fim da fatia
			false
		);
		Pizza.ctx.closePath();
		Pizza.ctx.fillStyle = Pizza.cor;
		Pizza.ctx.fill();				
	}	
}
Pizza._init();

E por último, o drag, onde utilizo o jQuery UI, aí fica simples:

html:

	<div id="mascara_percentual">
		<span id="slider">drag<br/>me</span>
	</div>

javascript:

$('#slider').draggable({
	containment:'#mascara_percentual',
	drag:function() {
		var left = parseInt($(this).css('left').replace('px',''));
		var percentual = parseInt(left / 350 * 100); 
		// (350 = 400 do width da mascara - 50 do width do slider)
		Pizza._draw(percentual);
	}
});

// Iniciando em 70%
$('#slider').css('left','70%'); // drag
Pizza._draw(70); // canvas