Abbiamo già imparato a disegnare alcune linee in Canvas, quindi in questo articolo ti mostrerò come collegare quelle linee insieme per creare disegni molto più vividi.

1. Collega più linee insieme in Canvas

Come sappiamo in Canvas usiamo la funzione beginPath() per dichiarare l'inizio del disegno di una nuova forma. Quindi, per collegare più linee insieme, lo dichiariamo prima solo una volta, quindi ci basiamo sulla sintassi di ciascuna linea per determinare i punti di disegno.

Esempio : Disegna una figura come questa

Analizziamo prima questa figura come segue:

Quindi useremo due linee, una quadratica e una di Benzier.

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(100, 20); // line 1 context.lineTo(200, 160); // quadratic curve context.quadraticCurveTo(230, 200, 250, 120); // bezier curve context.bezierCurveTo(290, -40, 300, 200, 400, 150); // line 2 context.lineTo(500, 90); context.lineWidth = 5; context.strokeStyle = 'blue'; context.stroke();

2. Proprietà di unione di linea in Canvas

In Canvas, c'è una proprietà lineJoin che ci aiuta a scegliere come unire due linee ( intersezione ). Ha tre modi per connettersi come segue:

• mitra : per fare un angolo acuto
• tondo : angoli arrotondati
• smusso : arrotondato ad un angolo acuto ma ha perso la parte superiore

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // set line width for all lines context.lineWidth = 25; context.strokeStyle = 'blue'; // miter line join (left) context.beginPath(); context.moveTo(99, 150); context.lineTo(149, 50); context.lineTo(199, 150); context.lineJoin = 'miter'; context.stroke(); // round line join (middle) context.beginPath(); context.moveTo(239, 150); context.lineTo(289, 50); context.lineTo(339, 150); context.lineJoin = 'round'; context.stroke(); // bevel line join (right) context.beginPath(); context.moveTo(379, 150); context.lineTo(429, 50); context.lineTo(479, 150); context.lineJoin = 'bevel'; context.stroke();

3. Funzione ArcTo() in Canvas

La funzione arcTo() serve per creare un arco in Canvas con un dato punto di partenza, cioè serve per collegare una certa linea ( ovviamente quella linea ha già un punto finale e quel punto è anche il punto). di arcTo() ).

Sintassi : context.arcTo(x1, y1, x2, y2, r);

in cui :

• x1 : x posizione del punto di controllo
• y1 : y posizione del punto di controllo
• x2 : x posizione del punto finale
• y2 : y posizione del punto finale
• r : raggio dell'arco ( raggio ).

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); // Vẽ 1 đường thẳng ctx.moveTo(20, 20); ctx.lineTo(100, 20); // Nôi tiếp là một đường cung ctx.arcTo(150, 20, 150, 70, 50); // Tiếp theo là một đường thẳng ctx.lineTo(150, 120); ctx.stroke(); <br><br><br><br><br><br><br><br><br><br><br><br><br>

4. Conclusione

In questa lezione abbiamo imparato alcuni modi per unire le linee per formare una varietà di linee, combinando questi modi creerai disegni estremamente impressionanti. Tuttavia, lavorare con Canvas è davvero difficile perché il calcolo delle coordinate è molto lungo e complicato.

Nella prossima lezione impareremo come disegnare delle forme speciali chiamate Shapes. Ad esempio cerchio, rettangolo, semicerchio.