Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Donando

Canvas / fillRect com 100% da tela.

Por , em Desenvolvimento frontend

Recommended Posts

Donando    1

Donando
Postado

Amigos,

estou criando um código com java para criar um efeito de fade no background.

 

O código está assim:

<style type="text/css">
.tela{
width: 100%;
height: 100%;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 50;
}
</script>

<script type="text/javascript">
function fadeOut(id, time) {
       target = document.getElementById(id);
       alpha = 100;
       timer = (time*1000)/50;
       var i = setInterval(
                       function() {
                               if (alpha <= 0)
                               clearInterval(i);
                               setAlpha(target, alpha);
                               alpha -= 2;
                       }, timer);
}
function setAlpha(target, alpha) {
       target.style.filter = "alpha(opacity="+ alpha +")";
       target.style.opacity = alpha/100;
}
</script>

<body>
<body onload="javascript:fadeOut('alvo', 1.5)">

<div class="tela" id="alvo">
               <canvas id="myCanvas" width="2000" height="1000"></canvas>
               <script>
               var c=document.getElementById("myCanvas");
               var ctx=c.getContext("2d");
               ctx.fillStyle="#000000";
               ctx.fillRect(0,0,2000,1000);
               </script>     
</div>

<img class="bg" src="bg_05.jpg">

</body>

 

Porém gostaria de setar para que o canvas ou o fillRect sempre estivesse com 100% da janela.

Já tentei e pesquisei horas e horas, mas devo estar errando em algum lugar.

Alguém poderia me dar essa ajudinha.

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

limpei um pouco código... Verifiquei o tamanho do navegador e passei os valores para o objeto do fade.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>teste</title>
<style type="text/css">
.tela{
       width: 100%;
       height: 100%;
       display: block;
       position: fixed;
       top: 0;
       left: 0;
       z-index: 50;
}
</style>

<script type="text/javascript">
function fadeOut(id, time) {
       target = document.getElementById(id);
       alpha = 100;
       timer = (time*1000)/50;
       var i = setInterval(
                       function() {
                               if (alpha <= 0)
                               clearInterval(i);
                               setAlpha(target, alpha);
                               alpha -= 2;
                       }, timer);
}
function setAlpha(target, alpha) {
       target.style.filter = "alpha(opacity="+ alpha +")";
       target.style.opacity = alpha/100;
} //


var resizeCanvas = function (){
fadeOut('alvo', 1.5); // Chama o fade

x = window.innerWidth; // pega a largura do browser
y = window.innerHeight; // pega a altura do browser

               var c=document.getElementById("myCanvas");
               var ctx=c.getContext("2d");
               ctx.fillStyle="#000000";
               ctx.fillRect(0,0,x,y); // setando valores ao fillRect...

document.getElementById("myCanvas").style.height = y+"px"; // adiciona height no id myCanvas
document.getElementById("myCanvas").style.width = x+"px"; // adiciona width no id myCanvas
}
window.onload = resizeCanvas;  

</script>
</head>
<body>

<div class="tela" id="alvo">
               <canvas id="myCanvas"></canvas>

</div>

<img class="bg" src="bg_05.jpg"/>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Donando    1

Donando
Postado

Po, legal. Obrigado.

Mas tem um problema, da maneira que você fez, está acontecendo um bugzinho.

Na primeira vez que o browser abri a página, primeiro ele carrega o jpg e depois faz o fade do preto.

Gostaria que conforme no primeiro código que fiz, isso não acontecesse, ou seja, que o fade entrasse suave por cima do jpg sem que o jpg seja visto antes do fade acontecer.

Isso é possível?

 

Valeu

Obrigado

Abs

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito