Concludiamo vedendo come si possono tracciare ellissi e come si possono inserire scritte.  Le prime si tracciano col comando ellipse(cx,cy, rx,ry, rot, a1,a2, dir), specificando il centro, i "raggi" (ovvero i semiassi) orizzontale e verticale, la rotazione dell'asse orizzontale, gli angoli tra cui fare il tracciamento, la direzione ("true" se in senso antiorario, "false" se orario).  Con fillText si possono inserire scritte centrate in una posizione specificata e col colore precisato da fillStyle;  si può precisare il font e la dimensione in pixel con font.

<canvas width=450 height=400></canvas>
<script>
c = document.querySelector("canvas").getContext("2d")
c.strokeStyle="brown"; c.lineWidth=3
function rad(x) {return Math.PI*x/180}  // trasforma in radianti i gradi
// centro, raggi, rotazione, angoli iniziale e finale, direzione
c.beginPath(); c.ellipse(150,100, 100,40, rad(15), 0,rad(270), true); c.stroke()
c.strokeStyle="red"
c.beginPath(); c.ellipse(150,200, 100,40, rad(15), 0,rad(270), false); c.stroke()
c.fillStyle="black"; c.fillText("PROVE", 80,30)
c.fillStyle="black"; c.font="28px Arial"; c.fillText("PROVE", 150,30)
</script>

=========

=========

← TORNA INDIETRO