PRÁCTICA CANVAS IV

SCRIPT EXTERNO QUE DIBUJA Y BORRA FIGURAS Y COLORES EN EL CANVAS EN CUALQUIER RESOLUCIÓN


>> PINCHA AQUÍ << Para ver el resultado… Dale al PLAY.

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="iLogic.js" type="application/javascript"></script>
      <script language="JavaScript"> 
      document.writeln(screen.width + " x " + screen.height) 
      </script>
   
   </head> 
              
               
   <body id ="resolucionPantalla" onLoad="cargaResolucion()">
	   <div id="wraper">
		   
           <canvas id="iCanvas" ></canvas>
		   <div id="botones">
		   
			   <button id="play" type="button" class="button" onclick="principal('1')">PLAY</button>
			   <button id="para" type="button" class="button" onclick="principal('0')">STOP</button>
			   <button id="limpia" type="button" class="button" onclick="principal('2')">RESET</button>
	      </div>
		   


	   </div>

    </body>
   
   
</html>	      


          
		   
	 





Archivo JavaScript:

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

var FPS = 1;
var idProceso=1;
var milisegundos=1000;
var z;
ancho = (window.innerWidth)-50;
alto = (window.innerHeight)-100;



var myTimer;


function cargaResolucion(){
	

		var canvas = document.getElementById('iCanvas');
        var ctx = canvas.getContext('2d');
        ctx.canvas.width  = ancho ;
        ctx.canvas.height = alto;
		

        
		
		play.style.height="60";
		play.style.fontSize="20";
		para.style.height="60";
		para.style.fontSize="20";
		limpia.style.height="60";
		limpia.style.fontSize="20";
		
		
		
		
	
   
	     
	
	
	
}


// 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, ancho, alto );
		
	
	
	
}





// FUNCIÓN DE DIBUJO



function dibuja()

{

	z = Math.floor(Math.random()*4);
	
if (z==0)
	
{
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 = '#'+x+''+y+''+w+'';


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

	

	
ctx.lineWidth = x;

   
   ctx.beginPath();
   ctx.fillStyle = color;
   ctx.moveTo(x,y);
   ctx.bezierCurveTo(x,w,h,w,y,x);
   ctx.bezierCurveTo(w,x,x,w,h,y);
   ctx.bezierCurveTo(x,w,h,y,h,x);
   ctx.lineTo(w,h);
   ctx.fill();

}
	

else if (z==1)
	
{
	
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 = '#'+x+''+y+''+w+'';
console.log(color);
	


var canvas = document.getElementById('iCanvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = color;
ctx.lineWidth = x;
ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(x, y, w, h, x * Math.PI);
ctx.stroke();		
	
	
	
	
	
	
}else if (z==2){
	
	
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 = '#'+x+''+y+''+w+'';
	


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();	
	
	
	
	
	
	
	
}else if (z==3){

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 = '#'+x+''+y+''+w+'';
	


var canvas = document.getElementById('iCanvas');
var ctx = canvas.getContext('2d');
var degradado = ctx.createLinearGradient(x,y,w,h);
degradado.addColorStop(0,'black');
degradado.addColorStop(1,'white');
	
	
	
if (x >= 200)
	
{

ctx.beginPath();
ctx.strokeStyle = '#000000';
ctx.fillStyle = degradado;
ctx.arc(x, y, w, h, x * Math.PI);
ctx.stroke();
ctx.beginPath();
	
}if (x >=100 ){
ctx.fillStyle= degradado;	
ctx.moveTo(x,y);
ctx.lineTo(y,w);
ctx.lineTo(w,h);
ctx.lineTo(y,h);
ctx.fill();
ctx.stroke();
	
	

} if (x < 100){

ctx.fillRect(x,y,w,h);
	

}

Archivo CSS:

body {  background-color: #e4e4e4;
    	background-repeat:no-repeat;
     	background-size:contain;}





#iCanvas { border: 5px solid #000000;  display: block;}



    

.button {
  background-color: #000000;
  border-radius: 15px;
  border: none;
  color: white;
  text-decoration: none;
  cursor: pointer;
  padding: 20px;
  
}

#botones { display: block; margin-left: 33.3% ; margin-right: 33.3%; text-align: center;}



56 Vistas

¡Comparte!

Deja un comentario