Canvas javascript : Disegnare figure geometriche con curve
Tags: javascript, canvas, disegno, curve
Published: 2021-01-03 11:36:48

---
title: Canvas javascript : Disegnare figure geometriche con curve
published: true
description: Come disegnare figure a tracciati con curve sul canvas
tags: #javascript #canvas #disegno #curve
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1xvb9op6a2ht0xdqkvo6.png
---

Vediamo come disegnare delle figure geometriche _non poligoni_.
I **non poligoni sono figure composte da una o più linee curve**, la figura non poligono più conosciuta è certamente il cerchio.

Nel post metterò gli script relativi al disegno, ricordatevi che se volete provarli dovete inizializzare il canvas, come spiegato in questo [post](https://dev.to/camizzilla/canvas-javascript-un-potente-strumento-per-la-grafica-sul-web-4334) 

Qui sotto una lista di funzioni che abbiamo usato nel post [Disegnare figure regolari](https://dev.to/camizzilla/canvas-javascript-5ad9), che ci sono serviti per creare delle linee e dei poligoni _spezzati_, e che sono fondamentali anche in questo tutorial.

* `beginPath()`: salva la lista di punti creati successivamente
* `moveTo()`: crea un punto nel canvas senza essere tracciato
* `stroke`: traccia tra di loro i punti salvati nel path 
* `fill()`: Riempie la figura formatasi con i punti salvati nel path
* `closePath`: Chiude il path e il tracciato unendo l'ultimo punto con il primo.

##CERCHIO
Per creare un **cerchio** bisogna **tracciare una linea equidistante da un punto centrale**.

La funzione del _getContext_ che ci serve è: 
`arc(x, y, raggio, AngoloIniziale, AngoloFinale)`
che **traccia un arco da un punto centrale definito ad una certa distanza**, misurata con il _raggio_.

* x, y : coordinate del punto centrale
* raggio: distanza tra il punto centrale e la circonferenza, che definisce la grandezza del cerchio.
* Angolo Iniziale: Punto di partenza sulla circonferenza del tracciato.
*Angolo Finale: Punto di finale dove finisce il tracciato.

Nel cerchio gli argomenti _AngoloIniziale_ e _AngoloFinale_ sono due constati, perchè i cerchi iniziano sempre con il valore 0 e finiscono il loro tracciato con il valore 2 * Math.PI, il doppio del pi greco ( 3,14...).

``` javascript
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke(); 

ctx.beginPath();
ctx.arc(250, 75, 50, 0, 2 * Math.PI);
ctx.fill();
```
{% codepen https://codepen.io/camizzilla/pen/BaLJVbK %}

##ARCO

Un **arco** possiamo definirlo in maniera molto semplicistica, come **una porzione di cerchio**.

Ci sono **due modi** per disegnare degli archi.

**La prima** è usare **la funzione** che abbiamo usato **_arc()_** per i cerchi, dove però gli argomenti _AngoloIniziale_ e l'_AngoloFinale_ non saranno più delle costanti, ma cambieranno all'esigenza.
Ricordandosi che **bisogna usare come misura il pi greco e i suoi multipli**.

``` javascript
ctx.beginPath();
ctx.arc(100, 55, 50, 0, Math.PI);
ctx.stroke(); 

ctx.beginPath();
ctx.arc(100, 305, 50, Math.PI / 2, Math.PI * 1.75);
ctx.stroke(); 

ctx.beginPath();
ctx.arc(400, 155, 50, 0, Math.PI / 2, true);
ctx.stroke(); 
```

Se notate nell'ultimo _path_, nella funzione arc(), c'è un argomento in più, si tratta di un argomento opzionale che riceve un booleano, che cambia la rotazione di come viene tracciato. Di default è in senso orario ed è _false_, ma se vogliamo che il tracciato si disegni in senso antiorario dobbiamo settarlo come _true_.

{% codepen https://codepen.io/camizzilla/pen/vYXdPmY %}

**Il secondo metodo** è la funzione 
`ctx.arcTo(x1, y1, x2, y2, raggio)` 
che a confronto della funzione precendente che si sviluppa dal centro, **questo funzione parte a tracciare la curva dalla tangente del cerchio**.

Trovo questa funzione molto utile per creare rettangoli con i bordi arrotondati.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1h7p9bjfn9hp0lad90qc.jpg)

La funzione `arcTo(x1, y1, x2, y2, raggio)` prende come argoemnti 2 coordinate e il raggio.

* x1, y1 : é la coordinata della prima tangente, che devinisce la distanza media tra il punto iniziale e il punto finale.
* x2, y2 : è la coordinata del punto finale della curva.
* raggio: è il raggio del cerchio che si forma e definisce la dimensione della curva.

``` javascript
ctx.beginPath();
ctx.moveTo(20, 20);           
ctx.lineTo(100, 20);           
ctx.arcTo(150, 20, 150, 70, 50); 
ctx.lineTo(150, 120);         
ctx.stroke(); 
```
In questo script uniamo due rette con un una curva di raggio 50px, 
la prima tangente da dove parte la curva è data dalla cordinata di moveTo.

La spiegazione può sembrare incasita, il mio consiglio è giocare con i vari argomenti e testare.

{% codepen https://codepen.io/camizzilla/pen/JjRpQaq %}

##CURVE DI BEZIER

Con le **curve di Bezier** è possibile **creare curve trammite dei punti, senza essere legato ad una circonferenza** come gli _arc_, quindi potrà essere una curva non omogenea.

Le **due funzioni per disegnare le curve di Bezier** sono:
* quadraticCurveTo(x1, y1, x, y)
* bezierCurveTo(x1, y1, x2, y2, x, y)

###QuadraticCurveTo
`quadraticCurveTo()` funziona come _arcTo()_, ma senza raggio. 
* x1, y1: La coordinata del punto che controlla l'ampiezza della curvatura.
* x, y: La coordinata dove finisce la curva.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f27xahzh2sx9vxtnxt5g.jpg)

``` javascript
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.quadraticCurveTo(230, 30, 100, 100);
ctx.stroke();
``` 
{% codepen https://codepen.io/camizzilla/pen/jOMzVLE %}

###BezierCurveTo
`bezierCurveTo()` è lo **strumento** più ostico per fare curve e figure geometriche, ma una volta padroneggiato **da la possibilità di creare figure o linee molto complesse e articolate**.

A confronto del quadraticCurveTo, ha due punti, invece di uno e questo permette di avere diverse curvature nei due punti, iniziale e finale. 

* x1, y1: coordinata che gestisce la prima metà della curva.
* x2, y2: coordinata che gestisce la seconda metà della curva.
* x, y: coordinata dove finisce la curva.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wt20snl3c8068288p1ns.jpg)

``` javascript
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(175, 37, 170, 25, 150, 125);
ctx.stroke();
``` 

{% codepen https://codepen.io/camizzilla/pen/LYRdbrd %}

##CONCLUSIONE

In questo articolo abbiamo imparato come si disegnano delle figure geometriche con curve.

Sicuramente per capire al meglio il funzionamento per la creazione di curve il miglior modo è sporcasi le mani con il codice.

Gli esempi più belli quello del baloon e del cuore li ho presi dalla pagina di [developer.mozilla](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)   

Nel prossimo post andremo a dare un po' di stile alle nostre forme geometriche e non.

Se avete dei consigli, suggerimenti o critiche costruttive lasciatemi un commento qui sotto oppure contattatemi trammite i miei social.