Viciados BR
Olá bem vindo a o Viciados BR

Se você ainda não e membro Cadastre-se Agora
Ou se você já é membro, Logue-se .
e veja nosso Conteúdo.
Pois conteúdo aqui é o que não falta !
Painel de Usuário
Convidado
Mensagens: 0


Alterar
Ver
Tópicos e mensagens

Contador de Visitas

Como Fazer Efeito Loding

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Como Fazer Efeito Loding

Mensagem por Luis-701 em Dom Abr 17, 2011 4:32 pm

Pois é gente, muita gente quer me bater pois so posto coisas do HTML5 de CANVAS, bem, primeiro é porque o CANVAS é a unica ferramenta do HTML5 funcionando direitinho, e também da pra fazer coisinhas legal com CANVAS.

Bem vamos começar logo com essa "joça"

Como de costume, vamos criar uma index.html e estruturar o CANVAS.

index.html





Efeito Loading com CANVAS by Luis-701









var canvas = document.createElement('canvas');
canvas.height = 100;
canvas.width = 300;








Agora dentro do script que criamos o canvas, vamos falar como ele vai fira, e quantos graus vai girar e para onde vai girar.

index.html





Efeito Loading com CANVAS by Luis-701








buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });

function buildSpinner(data) {

var canvas = document.createElement('canvas');
canvas.height = 100;
canvas.width = 300;
document.getElementsByTagName('article')[0].appendChild(canvas);
var ctx = canvas.getContext("2d"),
i = 0, degrees = data.degrees, loops = 0, degreesList = [];

for (i = 0; i < degrees; i++) {
degreesList.push(i);
}

// reset
i = 0;

// so I can kill it later
window.canvasTimer = setInterval(draw, 1000/degrees);

function reset() {
ctx.clearRect(0,0,100,100); // clear canvas

var left = degreesList.slice(0, 1);
var right = degreesList.slice(1, degreesList.length);
degreesList = right.concat(left);
}

function draw() {
var c, s, e;

var d = 0;

if (i == 0) {
reset();
}

ctx.save();

d = degreesList[i];
c = Math.floor(255/degrees*i);
ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
ctx.lineWidth = data.size;
ctx.beginPath();
s = Math.floor(360/degrees*(d));
e = Math.floor(360/degrees*(d+1)) - 1;

ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e,

false);
ctx.stroke();

ctx.restore();

i++;
if (i >= degrees) {
i = 0;
}
}
}







Pronto, agora é so salvar e curtir o efeito LOADING, barrinhas girando cicurlamente.

Fiquem ligados nos meus próximos tutoriais!!

Luis-701
Membro Novato
Membro Novato

Post Post : 25
Reputação Reputação : 0
Data de Inscriçao Data de Inscriçao : 16/04/2011

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Como Fazer Efeito Loding

Mensagem por Luis-701 em Dom Abr 17, 2011 4:33 pm

desculpa galerinha tem alguns erros ebreve eu ajeito

Luis-701
Membro Novato
Membro Novato

Post Post : 25
Reputação Reputação : 0
Data de Inscriçao Data de Inscriçao : 16/04/2011

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Como Fazer Efeito Loding

Mensagem por @Marcos Lima em Dom Abr 17, 2011 5:15 pm

Cuidado com o Duplo-Post ... *-*
avatar
@Marcos Lima
Moderador
Moderador

Post Post : 58
Reputação Reputação : 0
Data de Inscriçao Data de Inscriçao : 12/02/2011
Idade : 18
Localização : Aqui No Neet

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Como Fazer Efeito Loding

Mensagem por Chokito em Dom Abr 17, 2011 6:34 pm

Cuidado com o Duplo Post ...
avatar
Chokito
Membro Novato
Membro Novato

Post Post : 26
Reputação Reputação : 0
Data de Inscriçao Data de Inscriçao : 16/04/2011
Idade : 23
Localização : Pulmão do Mundo .

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Como Fazer Efeito Loding

Mensagem por Hunter em Dom Abr 17, 2011 9:32 pm

Luis-701 +10 ocorrencias Dual-post
Tome mais cuidado
avatar
Hunter
Membro Novato
Membro Novato

Post Post : 32
Reputação Reputação : 0
Data de Inscriçao Data de Inscriçao : 07/04/2011
Localização : Atras de você muahahahah

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Como Fazer Efeito Loding

Mensagem por - Goooglee em Dom Abr 17, 2011 9:39 pm

topico fechado para evitar flood.
avatar
- Goooglee
Membro de Bronze
Membro de Bronze

Post Post : 458
Reputação Reputação : 4
Data de Inscriçao Data de Inscriçao : 31/01/2011
Idade : 21

Ver perfil do usuário http://equipetenso.co.nr

Voltar ao Topo Ir em baixo

Re: Como Fazer Efeito Loding

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum