PRÁCTICA CANVAS 0.1

Cinco estados geométricos con valores aleatorios y música de fondo. No te olvides de darle al PLAY!

>> PINCHA AQUÍ << Para disfrutar el resultado A.

>> PINCHA AQUÍ << Para disfrutar el resultado B.

>> PINCHA AQUÍ << Para disfrutar el resultado C.

>> PINCHA AQUÍ << Para disfrutar el resultado D.

>> PINCHA AQUÍ << Para disfrutar el resultado E.

Código de A:


Documento HTML:

<html>

   <head>
      <title>TALLER CREATIVO DULCINEA | J.C. Sobrepere</title>
	  <meta charset="UTF-8">
      <link rel="stylesheet" type="text/css" href="estilo.css">
      <script src="logica.js" type="application/javascript"></script>
      
   
   </head>
              
               
   <body>
	   
	   <center><H2>TALLER CREATIVO DULCINEA </H2></center>
       <canvas id="iCanvas" width="500px" height="500px"></canvas>
	   <center><p>J.C. Sobrepere | música: Coyote Hearing</p></center>
	   <form name='formulario'>
		   <center><table><tr>
			   <td><button type="button" onclick="principal('1')">PLAY</button></td>
			   <td><button type="button" onclick="principal('0')">STOP</button></td>
			   <td><button type="button" onclick="principal('2')">RESET</button></td>
			   </tr></table></center></form>
 
  
  
	   <center><audio src="Mountain_Jump.mp3" preload="auto" controls autoplay  type="audio/mpeg">
¡Tu navegador no soporta el elemento Audio!
	   </audio></center>
	   <br><br>
</body>
   
   
</html>

Archivo Javascript:

// LÓGICA CANVAS 0.0.1
// Autor: Jordi Casado Sobrepere
// Variables

var FPS = 30;
var idProceso=1;
var milisegundos=1000;


var myTimer;


// FUNCIÓN PRINCIPAL 

function principal(x){
	
	
	if (x == 1 && idProceso==1)
{

		
		
		  myTimer = setInterval(dibuja,milisegundos/FPS);
	      idProceso=0;
	}
		
		
	

else if(x == 0 && idProceso==0)
{
	clearInterval(myTimer);
	idProceso=1;
	
}else if (x==2 && idProceso==1){
	
    borra();
	idProceso=1;
    

}
	
	
}
	
	

// FUNCIÓN DE BORRADO


function borra()
{
	
	
	var canvas = document.getElementById('iCanvas');
    var ctx = canvas.getContext('2d');
	
	ctx.clearRect(0, 0, 500, 500);
		
	
	
	
}





// FUNCIÓN DE DIBUJO



function dibuja()

{


var x = Math.round(Math.random()*1000);
var y = Math.round(Math.random()*1000);
var w = Math.round(Math.random()*1000);
var h = Math.round(Math.random()*1000);
var color = '#ffffff';

	


var canvas = document.getElementById('iCanvas');
var ctx = canvas.getContext('2d');

ctx.strokeStyle = color;
ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(x, y, w, h, x * Math.PI);
ctx.stroke();	
	
}



function contador()

{
	
	duracion  = 60000;	
	
	
	
	
	
}

Archivo CSS:

body { background-color: #000000;}


#iCanvas { border: 5px solid #ffffff ; margin-top: auto;  padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block; }
H2 { margin-left: auto; margin-right: auto; display: block; align-content: center ; color: #ffffff }

p { font-size: 12px ; color: #ffffff}

.menu { font-family: monospace; font-size: 25px; border-color: white; padding: 10px ; }

a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}
71 Vistas

¡Comparte!

Deja un comentario