Oltre a disegnare linee rette, Canvas può anche disegnare curve come archi, curve quadratiche e curve di Benzier. Per quanto riguarda come disegnare una retta, abbiamo solo bisogno di determinare i punti di inizio e fine, ma con le curve ci sono alcuni problemi da calcolare prima di disegnarla.

1. Disegna un arco in Canvas

Per disegnare un arco, utilizziamo la funzione arc(x, y, radius, startAngle, endAngle, counterClockwise) , dove:

• x sono i y dell'arco
• radius è il raggio
• startAngle è l'angolo iniziale
• endAngle è l'angolo finale
• in senso counterClockwise è la direzione del disegno ( in senso orario o antiorario )

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // Xác đinh tâm là trọng tâm của Canvas var x = canvas.width / 2; var y = canvas.height / 2; // bán kính 75px var radius = 75; // Góc bắt đầu là 1.1PI var startAngle = 1.1 * Math.PI; // Góc kết thúc là 1.9PI var endAngle = 1.9 * Math.PI; // Cùng chiều kim đồng hồ var counterClockwise = false; // Vẽ đường cung context.beginPath(); context.arc(x, y, radius, startAngle, endAngle, counterClockwise); context.lineWidth = 15; // line color context.strokeStyle = 'black'; context.stroke();

2. Disegna una curva quadratica in Canvas

Per disegnare una curva quadratica in Canvas, utilizziamo il metodo quadraticCurveTo() , la curva quadratica è determinata da tre punti principali tra cui:

• Il punto di partenza (punto di contesto ).
• Punto di controllo (punto di controllo ).
• Punto finale ( punto finale ).

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(20, 20); // Điểm bắt đầu vẽ context.quadraticCurveTo(20, 100, 200, 20); //vẽ qua các điểm context.lineWidth = 1; // line color context.strokeStyle = 'black'; context.stroke();

• Il punto di partenza è ( 20, 20 ) nella funzione context.moveTo( 20, 20 ) .
• Il punto di controllo è ( 20, 100 ) nella funzione context.quadraticCurveTo( 20, 100 , 200, 20) .
• Il punto finale è ( 200, 20 ) nella funzione context.quadraticCurveTo(20, 100, 200, 20 ) .

La posizione del vertice della curva è determinata dalla linea che collega i punti medi tra le due linee ( punto di contesto, punto di controllo ) e ( punto finale, punto di controllo ).

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(188, 150); context.quadraticCurveTo(288, 0, 388, 150); context.lineWidth = 10; // line color context.strokeStyle = 'black'; context.stroke();

3. Disegna una curva di Benzier in Canvas

La curva di Benzier è definita da quattro punti:

• Il punto di partenza ( punto di contesto )
• Punto di controllo uno ( punto di controllo 1 )
• Punto di controllo due ( punto di controllo 2 )
• Punto finale

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20, 20); ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); ctx.stroke();

La spiegazione nel codice è la seguente:

• Il punto di partenza è ( 20, 20 ) nella funzione context.moveTo( 20, 20 ) .
• Il punto di controllo 1 è ( 20, 100 ) nella funzione context.quadraticCurveTo( 20, 100 , 200, 100, 200, 20) .
• Il punto di controllo 2 è ( 200, 100 ) nella funzione context.quadraticCurveTo(20, 100, 200, 100 , 200, 20) .
• Il punto finale è ( 200, 20 ) nella funzione context.quadraticCurveTo(20, 100, 200, 100, 200, 20 ) .

La domanda è come determinare il vertice e la curvatura? Vedi l'esempio qui sotto.

 var canvas = document.getElementById('myCanvas');<br /> var context = canvas.getContext('2d');<br /> <br /> context.beginPath();<br /> context.moveTo(188, 130);<br /> context.bezierCurveTo(140, 10, 388, 10, 388, 170);<br /> context.lineWidth = 10;<br /> <br /> // line color<br /> context.strokeStyle = 'black';<br /> context.stroke();

4. Conclusione

Inizio già ad avere difficoltà a lavorare con Canvas. In realtà, per disegnare buone immagini, devi calcolare ogni Pixel standard, per non parlare del dover usare le conoscenze matematiche per determinare le coordinate.

Nella prossima lezione impareremo come disegnare una linea usando le funzioni apprese in questa e nelle precedenti lezioni.