<html><head><title>Représentation des axes et des angles dans un canvas</title></head><body><h1>Représentation des axes et des angles dans un canvas</h1><p>Observez les axes x et y et la position (0,0)</p><p>Le cercle central est positionné au centre du canvas</p><div class="dessin"><canvas id="myCanvas" width="300" height="300" style="background-color:#fff"></canvas></div><script type="text/javascript">var myCanvas=document.getElementById("myCanvas");var myContext=myCanvas.getContext("2d");/* Tracé de l'axe x (axe, fleche et libellé) */myContext.lineWidth="1";myContext.font="13px arial";myContext.beginPath();myContext.moveTo(5,5);myContext.lineTo(300,5);myContext.stroke();myContext.stroke(); /* Flèche */myContext.beginPath();myContext.moveTo(295,0);myContext.lineTo(300,5);myContext.lineTo(295,10);myContext.stroke();myContext.fillText("x", 290,19);/* Tracé de l'axe y (axe, fleche et libellé) */myContext.beginPath(); /* Axe */myContext.moveTo(5,5);myContext.lineTo(5,300);myContext.stroke(); /* Flèche */myContext.beginPath();myContext.moveTo(0,295);myContext.lineTo(5,300);myContext.lineTo(10,295);myContext.stroke();myContext.fillText("(0, 0)", 8, 18);myContext.fillText("y", 12, 295);myContext.fillText("(0, 0)", 8, 18);/* Tracé du centre en pointillé */myContext.lineWidth="1";myContext.setLineDash([5, 3]);myContext.beginPath();myContext.moveTo(10,150);myContext.lineTo(300,150);myContext.stroke();myContext.beginPath();myContext.moveTo(150,10);myContext.lineTo(150,300);myContext.stroke();myContext.fillText("(150, 150)", 155, 165);/* Cercle un tour complet bleu */myContext.setLineDash([]); /* Trait plein */myContext.lineWidth="2";myContext.font="bold 15px arial";myContext.beginPath();myContext.strokeStyle="#316AC5";myContext.fillStyle=myContext.strokeStyle;myContext.arc(150, 150, 130, 0 , 2*Math.PI);myContext.stroke();myContext.fillText("0 = 2.PI", 300-75, 150-3);/* Ajout de la flèche de sens avec un peu de trigonométrie */myContext.beginPath();myContext.moveTo(150+130*Math.cos(Math.PI/4)+10, 150+130*Math.sin(Math.PI/4));myContext.lineTo(150+130*Math.cos(Math.PI/4), 150+130*Math.sin(Math.PI/4))myContext.moveTo(150+130*Math.cos(Math.PI/4), 150+130*Math.sin(Math.PI/4)-10);myContext.lineTo(150+130*Math.cos(Math.PI/4), 150+130*Math.sin(Math.PI/4))myContext.stroke(); /* Arc de cercle rouge entre 0 et PI/2 */myContext.beginPath();myContext.strokeStyle="#ff0000";myContext.fillStyle=myContext.strokeStyle;myContext.arc(150, 150, 110, 0 , Math.PI/2);myContext.stroke();myContext.fillText("PI/2", 150+110*Math.cos(Math.PI/2)-30, 150+110*Math.sin(Math.PI/2)+5);/* Arc de cercle orange entre PI/8 et 3PI/2 */myContext.beginPath();myContext.strokeStyle="#FFA500";myContext.fillStyle=myContext.strokeStyle;myContext.arc(150, 150, 90, Math.PI/8, 3*Math.PI/2);myContext.stroke();myContext.fillText("3.PI/2", 150+90*Math.cos(3*Math.PI/2)+10, 150+90*Math.sin(3*Math.PI/2)-3);myContext.fillText("PI/8", 150+90*Math.cos(Math.PI/8)-10, 150+90*Math.sin(Math.PI/8)-3);/* Arc de cercle vert entre 3PI/4 et 5PI/4 */myContext.beginPath();myContext.strokeStyle="#00aa00";myContext.fillStyle=myContext.strokeStyle;myContext.arc(150, 150, 70, 3*Math.PI/4 , 5*Math.PI/4);myContext.stroke();myContext.fillText("3.PI/4", 150+70*Math.cos(3*Math.PI/4)+5, 150+70*Math.sin(3*Math.PI/4)+3);myContext.fillText("5.PI/4", 150+70*Math.cos(5*Math.PI/4)-10, 150+70*Math.sin(5*Math.PI/4)-3);</script><style type="text/css"> div.dessin { background: #fff; padding:5px; text-align: center; }</style></body></html>
Edition 1 | Chapitre 19 : Le dessin et les canvas / Page 252
Edition 2 | Chapitre 20 : Le dessin et les canvas / Page 274
Edition 3 | Chapitre 20 : Le dessin et les canvas / Page 274
En savoir plus
