jQuery: disegnare una figura geometrica senza canvas

jQuery ci permette, tramite i suoi metodi, di disegnare una figura geometrica senza l'ausilio dell'elemento HTML5 canvas. In questo esempio vedremo come disegnare un semplice quadrato e riempirlo con un colore solido. L'implementazione prevede l'uso di poche regole CSS e di alcuni timer JavaScript annidati. Vediamo insieme i dettagli.

La marcatura è la seguente:

<div id="square">

	<div id="top"></div>
	<div id="right"></div>
	<div id="bottom"></div>
	<div id="left"></div>

</div>

Ciascun elemento all'interno del contenitore square andrà a disegnare un lato del quadrato. Nel CSS dobbiamo usare il posizionamento contestuale per posizionare i quattro elementi, facendo anche in modo che le loro dimensioni iniziali siano pari a zero:

#square {
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -100px;
}

#top {
	position: absolute;
	top: 0;
	left: 0;
	width: 0px; /* width: 200 height: 2 */
	height: 0px;
	background: black;
}

#right {
	position: absolute;
	top: 0;
	right: 0;
	width: 0px; /* width: 2 height: 200 */
	height: 0px;
	background: black;
}

#bottom {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 0px;  /* width: 200 height: 2 */
	height: 0px;
	background: black;
}

#left {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0px; /* width: 2 height: 200 */
	height: 0px;
	background: black;
}

I quattro elementi sono posizionati ai quattro lati del loro contenitore. Con jQuery dobbiamo creare 4 contatori con quattro timer diversi che andranno progressivamente ad incrementare l'altezza o la larghezza dei quattro elementi, a seconda se si tratti di linee orizzontali o verticali:

$(document).ready(function() {

    var counter1 = 0;
    var counter2 = 0;
    var counter3 = 0;
    var counter4 = 0;
    
    var interval1 = window.setInterval(function() {
    
    
      counter1 += 1;
      
      $('#top').css({height: '2px', width: counter1});
      
      if(counter1 == 200) {
      
        window.clearInterval(interval1);
        
        var interval2 = window.setInterval(function() {
        
          counter2 += 1;
          
          $('#right').css({width: '2px', height: counter2});
          
          if(counter2 == 200) {
          
            window.clearInterval(interval2);
            
            var interval3 = window.setInterval(function() {
            
            
              counter3 += 1;
              
              $('#bottom').css({height: '2px', width: counter3});
              
              if(counter3 == 200) {
              
                window.clearInterval(interval3);
                
                var interval4 = window.setInterval(function() {
                
                
                
                  counter4 += 1;
                  
                  $('#left').css({width: '2px', height: counter4});
                  
                  if(counter4 == 200) {
                  
                    window.clearInterval(interval4);
                    
                    $('#square').css('background', 'yellow');
                  
                  }
                
                
                
                
                }, 50);
              
              
              }
            
            
            }, 50);
          
          }
          
        
        }, 50);
      
      }
    
    
    }, 50);

});

Quando un contatore raggiunge il valore 200 (la dimensione di un lato del quadrato) si ferma e inizia il successivo. Potete visionare l'esempio finale in questa pagina.