L’ellisse รจ simile all’arco (cerchio…) ma ha due raggi e un angolo di orientamento
|
1 |
ellipse(x,y, r1,r2, angolo, start,end, [counter-clockwise]) |
Un’ellisse al centro, oppure tre ellissi con rotazione, in senso orario, dell’asse maggiore (pi/6)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<canvas id="canvas1" style="border: 1px solid;" width="300" height="200"></canvas> <script> canvas=document.getElementById("canvas1"); w=canvas.width; h=canvas.height; w2=w/2; h2=h/2; r1=0.4*h; r2=0.2*h; g2d=canvas.getContext("2d"); g2d.fillStyle="red"; g2d.ellipse(w2,h2, r1,r2, 0, 0,2*Math.PI); g2d.fill(); g2d.stroke(); // ----------------------------------------------------------------- // --- COLORE=Array("red", "green", "blue"); for(i=0; i < 3; i++) { angolo=i*Math.PI/6; g2d.beginPath(); g2d.fillStyle=COLORE[i]; g2d.ellipse(w2,h2, r1,r2, angolo, 0,2*Math.PI); g2d.fill(); g2d.stroke(); } </script> |
Due semi-ellissi, anche con le rotazioni (pi/4)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<canvas id="canvas3" style="border: 1px solid;" width="300" height="200"></canvas> <canvas id="canvas4" style="border: 1px solid;" width="300" height="200"></canvas> <script> canvas=document.getElementById("canvas3"); w=canvas.width; h=canvas.height; w2=w/2; h2=h/2; r1=0.4*h; r2=0.2*h; g2d=canvas.getContext("2d"); g2d.beginPath(); g2d.fillStyle="red" ; g2d.ellipse(w2,h2, r1,r2, 0, 0,Math.PI ); g2d.fill();g2d.stroke(); g2d.beginPath(); g2d.fillStyle="blue"; g2d.ellipse(w2,h2, r1,r2, 0, Math.PI,2*Math.PI); g2d.fill();g2d.stroke(); //-------------------------------------------------------------------------------------------------------------- //--- for(i=0; i < 3; i++) { angolo=i*Math.PI/4; g2d.beginPath(); g2d.fillStyle="red" ; g2d.ellipse(w2,h2, r1,r2, angolo, 0,Math.PI ); g2d.fill();g2d.stroke(); g2d.beginPath(); g2d.fillStyle="blue"; g2d.ellipse(w2,h2, r1,r2, angolo, Math.PI,2*Math.PI); g2d.fill();g2d.stroke(); } </script> |
Tre settori di colore diverso della stessa ellisse
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<canvas id="canvas5" style="border: 1px solid;" width="300" height="200"></canvas> <script> canvas=document.getElementById("canvas5"); w=canvas.width; h=canvas.height; w2=w/2; h2=h/2; r1=0.4*h; r2=0.2*h; g2d=canvas.getContext("2d"); COLORE=Array("red","green","blue"); for(i=0; i < 3; i++) { angolo=2*Math.PI/3; start= i*angolo; end =(i+1)*angolo; g2d.beginPath(); g2d.fillStyle=COLORE[i]; g2d.ellipse(w2,h2, r1,r2, 0, start,end); g2d.fill(); g2d.stroke(); } </script> |