Canvas: un disegno manipolato da un form

Questo post nasce da una esigenza che ho avuto: un semplice disegno che reagisse a delle modifiche di valori tramite delle select di un form. La soluzione, per vari motivi, non poteva essere flash e quindi mi sono orientato a usare l’ogetto canvas di html5. La compatibilità con i vari ie è garantita dalla libreria excanvas.js

Quindi ho creato le mie tre select che raffigurano una linea vertivale, una linea obliqua e l’angolo; l’html della pagina è completato dal nostro canvas.

Al caricamento della pagina, via jquery, associo l’onchange delle select con la modifica al disegno mediante la chiamata alla funzone disegna.

La funzione disegna, innanzitutto si predispone e “aggancia” il canvas pronto per il disegno 2D:

var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);

La parte successiva è un po’ noiosa e consiste nella lettura del form e nel calcolo dei valori necessari al nostro disegno: difatti il canvas è un piano cartesiano e per disgnare delle lineee con punto di partenza e di arrivo bisogn far ricorso a un po’ di trigonometria. Ma la parte che più interessa è quella del disegno vero e prorpio:

context.beginPath();
context.moveTo(290, hfinestra);
context.lineTo(290, 45);

Mi posiziono in un punto fisso sull’asse delle x e la cui altezza è determinata dalla select della linea verticale e traccio una riga fino a un punto fisso di congiunzione delle due righe

context.lineTo(coseno, seno);
context.lineWidth = 10;
context.strokeStyle = “black”;

La seconda linea va da dove sono arrivato fino al puntodeterminato dal coseno e al seno calcolati in base all’angolo e alla lunghezza della linea verticale. Setto spessore e colore della linea, infine la disegno:

context.stroke();

La pagina contiene anche un pulsante che chiama una funzione per pulire

L’esempio completo