Percorso Canvas HTML5

Il percorso del canvas HTML5 viene utilizzato per disegnare vari tipi di forme (linee, cerchi, poligoni, ecc.) sul canvas HTML5, il percorso viene utilizzato per disegnare vari tipi di forme sul canvas HTML5

Il percorso del canvas HTML5 è una serie di punti, tra cui ci sono istruzioni di disegno. Ad esempio, una serie di punti possono avere linee tra di loro, o ci possono essere curve.

Il percorso viene utilizzato per disegnare vari tipi di forme (linee, cerchi, poligoni, ecc.) sul canvas HTML5, quindi è molto importante comprendere questo concetto centrale.

Inizio e fine del percorso - Percorso

Si utilizzano le funzioni beginPath() e closePath() del contesto 2D per iniziare e terminare un percorso, come mostrato di seguito:

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");context.beginPath();
//...operazioni di disegno del percorso
context.closePath();

moveTo()

Quando si disegna con un percorso, si utilizza una 'penna' virtuale o 'puntatore'. Il puntatore virtuale è sempre posizionato in un punto. Si utilizza la funzione moveTo(x, y) del contesto 2D per muovere il puntatore virtuale, come mostrato di seguito:

context.moveTo(10,10);

Questo esempio sposta il puntatore al punto 10,10.

funzione lineTo()

La funzione lineTo() disegna una linea dal punto della posizione virtuale del puntatore al punto passato come parametro alla funzione. Ecco un esempio:

context.beginPath();
context.moveTo(10,10);
context.lineTo(50,50);
context.closePath();

Questo esempio sposta il puntatore al punto 10,10 e poi disegna una linea da questo punto al punto 50,50.

The lineTo() function also moves the virtual pointer to the end of the line. Therefore, in the above example, the pointer moves to 50,50, indicating that the canvas draws a line to that point.

stroke() + fill()

No path is actually drawn before you indicate the 2D context to draw the path. This operation is completed by calling stroke() or fill() on the 2D context.
The stroke() function draws the outline of the shape defined by path operations.
The fill() function fills the shape defined by path operations.
Here is an example of both applied to the same shape: stroke() and fill():

<canvas id="ex1" width="500" height="75" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex1");var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);
context.fill();
context.closePath();</script>

This is the result of running the above code:

LineWidth

You can use the lineWidth property of the 2D context to set the width of various stroke functions for drawing lines. Here is an example:

context.lineWidth = 10;

The above example sets the line width for all subsequent drawing operations to 10 pixels.
These are three lines with line widths of 1, 5, and 10 respectively:

When the line width is greater than 1, the additional width of the line is drawn outside the center line. That is to say, if you draw a line from 10,10 to 100,10 with a line width of 10, then the line will actually start from 10,5 and extend to 10,15, and then horizontally extend to 100,5 and 100,15 from there. Like a rectangle.

Line cap (lineCap)

Quando si disegna una linea con un percorso, è possibile impostare la testa della linea. La testa della linea definisce come disegnare la fine della linea.
La larghezza della linea è impostata dall'attributo lineCap del contesto 2D. Può avere i seguenti valori:

• butt

• round

• square

Questo valore butt determina che l'estremità della linea sia piatta e ortogonale alla linea.
Questo valore round produce un'estremità arrotondata della linea, con un raggio della curva uguale alla metà della larghezza della linea.
Questo valore square disegna un rettangolo alla fine della linea. La dimensione del rettangolo è line width x line width / 2.
Questi sono una serie di esempi illustrativi di lineCap. Tutte le linee hanno uno spessore di 10. La linea più a sinistra utilizza il valore lineCap butt. La linea centrale utilizza il valore lineCap round. La linea più a destra utilizza il valore lineCap square

Può essere difficile vedere la differenza tra i valori lineCap butt e square. Pertanto, ho creato alcuni esempi di linee utilizzando butt e square, disegnate vicine per mostrare le differenze. In alto a sinistra utilizza butt, in basso a destra utilizza square.

Come puoi vedere, l'uso del valore lineCap square disegna un rettangolo aggiuntivo alla fine della linea, rendendo la linea un po' più lunga.

Connessione delle linee (lineJoin)

L'attributo lineJoin del contesto 2D definisce come disegnare i punti di connessione tra due linee. Il punto di connessione tra due linee è chiamato "connessione delle linee". L'attributo lineJoin può avere i seguenti valori:

• miter

• bevel

• round

Questi sono tre esempi di codice per impostare la connessione delle linee:

context.lineJoin = "miter";
context.lineJoin = "bevel";
context.lineJoin = "round";

Il valore del risultato miter determina il disegno di angoli retti per la connessione delle linee.
Il valore del risultato bevel determina il disegno di angoli retti (angoli) per la connessione delle linee.
Il valore del risultato round determina il disegno di angoli arrotondati per la connessione delle linee.
Questi sono tre esempi (da sinistra a destra) miter, bevel e round utilizzati come valore dell'attributo lineJoin.

arc()

La funzione arc() 2D di contesto disegna un arco sul canvas.

La funzione arc() utilizza 6 parametri:

• x: Coordinate x del punto centrale dell'arco circolare

• y: Coordinate y del punto centrale dell'arco circolare

• radius: Raggio dell'arco circolare

• startAngle: Angolo di radianza di inizio dell'arco

• endAngle: Angolo di radianza di fine dell'arco

• anticlockwise: Impostare se la direzione di inserimento è antioraria (non oraria).

Questo è un esempio di codice:

context.lineWidth = 3;
var x = 50;
var y = 50;
var radius = 25;
var startAngle = (Math.PI / 180) * 45;
var endAngle = (Math.PI / 180) * 90;
var anticlockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.stroke();
context.closePath();

Questo esempio di codice disegna un arco di cerchio con il centro a 50, 50, un raggio di 25 pixel, che parte da 45 gradi e si estende fino a 180 gradi. Potresti aver notato che gli angoli da 0 a 360 vengono convertiti in radianti.
Ecco come appare l'esempio di codice sulla tavolozza:

Questo è lo stesso esempio di codice, ma con anticlockwise impostato su true:

Per disegnare un cerchio completo, impostare semplicemente startAngle a 0 e endAngle a 2 * Math.PI uguale a (Math.PI / 180) * 360

arcTo()

Il contesto 2D ha unarcTo()ma può essere utilizzatofunzione lineTo()eper imitare la sua funzionearc()Quindi lo salto.

quadraticCurveTo()

La funzione quadraticCurveTo() disegna una curva di Bezier di secondo ordine da un punto all'altro. La curva è controllata da un singolo punto di controllo. Ecco un esempio di codice:

context.lineWidth = 3;
var fromX = 50;
var fromY = 50;
var toX = 100;
var toY = 50;
var cpX = 75;
var cpY = 100;
context.beginPath();
context.moveTo(fromX, fromY);
context.quadraticCurveTo(cpX, cpY, toX, toY);
context.stroke();
context.closePath();

Questo esempio di codice utilizza il punto di controllo 75, 100 (cpX, cpY) per disegnare una curva da 50, 50 a 100, 50. Il risultato della curva è come segue:

Il piccolo punto sulla tavolozza è il punto di controllo che ho disegnato qui. Di solito non fa parte di una curva.

bezierCurveTo()

La funzione bezierCurveTo() disegna una curva di Bezier di terzo ordine da un punto all'altro. La curva di Bezier di terzo ordine ha due punti di controllo, mentre la curva di Bezier di secondo ordine ha solo un punto di controllo. Ecco un esempio di codice:

context.lineWidth = 3;
var fromX = 50;
var fromY = 50;
var toX = 300;
var toY = 50;
var cp1X = 100;
var cp1Y = 100;
var cp2X = 250;
var cp2Y = 100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

Questo esempio di codice utilizza i punti di controllo 100, 100 (cp1X, cp1Y) e 250, 100 (cp2X, cp2Y) per disegnare una curva da 50, 50 a 300, 50. Il risultato della curva è come segue:

I due piccoli punti sulla tavolozza sono i punti di controllo che ho disegnato per mostrarti la loro posizione. Non sono disegnati come parte di una curva.
Questo è un esempio che utilizza punti di partenza, di arrivo e di controllo diversi:

context.lineWidth = 3;
var fromX = 50;
var fromY = 50;
var toX = 300;
var toY = 50;
var cp1X = 100;
var cp1Y = 10;
var cp2X = 250;
var cp2Y = 100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

Questa è la curva corrispondente:

Anche due punti sono punti di controllo di rendering chiari