Per disegnare un arco con l’html5 adoperiamo il tag canvas, lo spazio creato da questo marcatore consente di poter disegnare delle figure geometriche.
Nel caso specifico per poter creare un arco richiamiamo il metodo Arc(centroX, centroY, raggio, angolo di inizio, angolo di fine, direzione) che indica la posizione, la dimensione e quale parte del cerchio deve essere disegnato con l’utilizzo di 6 parametri che vengono impostati tra le parentesi tonde.
I primi due valori indicano il centro del cerchio sulla coordinata X (asse orizzontale) e sulla coordinata Y (asse verticale).
Il terzo valore è rappresentato dal raggio (radius), mentre il quarto valore indica l’inizio dell’angolo moltiplicato per p greco (PI) indicato in javascript con Math.PI.
Il quinto valore regola, invece, la fine dell’angolo moltiplicato sempre per il PI.
Il sesto valore è rappresentato da true e false, un valore boleano che serve ad indicare se l’arco deve svilupparsi in senso orario (false) o antiorario (true).
Vediamo adesso un esempio pratico scaricabile dal link in fondo alla pagina.
<!DOCTYPE HTML>
<html>
<head><title>Arco</title></head>
<body>
<canvas id="archi" width="600" height="300">
</canvas>
<script>
var raggio = document.getElementById("archi");
var context = raggio.getContext("2d");
var centerX = 300;// punto centrale in senso orizzontale
var centerY = 150;//punto centrale in senso verticale
var radius = 75; //raggio
var startangle = 0 * Math.PI;//inizio angolo
var endangle = 0.5 * Math.PI;//fine angolo
var direzione = false; // direzione in senso orario
context.arc(centerX, centerY, radius, startiangle, endangle, direzione);
context.lineWidth = 15;//spessore della linea
context.strokeStyle = "#996688"; // impostazione colore
context.stroke(); //metodo di visualizzazione
</script>
</body>
</html>
Cerchiamo di capire più in dettaglio il codice nella parte riguardante la creazione dell’arco.
Come vediamo le variabili centerX e centerY indicano il punto centrale da cui iniziare a disegnare il nostro arco all’interno del canvas, si adotta lo stesso principio del compasso, si posizione lo strumento su un punto del foglio e da quel punto si disegna la circonferenza del cerchio, in questo caso si tratta solo di una sua sezione, cioè l’arco.
La variabile radius indica il raggio, startangle imposta il punto di inizio dell’arco, mentre endangle indica l’angolo di fine. Per comprendere che cosa verrà disegnato, visualizziamo nella nostra mente il quadrante di un orologio, il valore zero corrisponde alle ore 15.00, mentre 0.5 alle ore 18.00. Unendo i due punti sapremo quale sezione del cerchio di cui fa parte l’arco viene disegnato. In questo caso l’arco corrisponderà ad ¼ di cerchio.
Seguendo la stessa logica possiamo dire che i valori compresi fra inizio e fine angolo vanno da 0 a 2 e che due disegna un cerchio completo.
La variabile “direzione” è, invece impostata su false, questo significa che l’arco si svilupperà in senso orario.
Per il download del file in html clicca prima su uno dei pulsanti di condivisione che troverai qui di seguito:
download esempio arcLink a questo articolo!Html5: Come disegnare un arco nel tag canvas" readonly="readonly" type="text" style="width: 100%;" onclick="javascript:this.select()" /> Category: Canvas e html5
Pacman
Nostradamus
Magical Cat Adventure
Snake