<canvas id="myCanvas" width="350" height="300" style="background-color:#fff"></canvas>
<script type="text/javascript">
var myCanvas=
document.
getElementById("myCanvas");
var myContext=myCanvas.
getContext("2d");
/* Tracé du centre */
myContext.
lineWidth="1";
myContext.
beginPath();
myContext.
moveTo(0,150);
myContext.
lineTo(300,150);
myContext.
stroke();
myContext.
beginPath();
myContext.
moveTo(150,0);
myContext.
lineTo(150,300);
myContext.
stroke();
myContext.
lineWidth="2";
myContext.
font="bold 15px arial";
/* Cercle complet bleu */
myContext.
beginPath();
myContext.
strokeStyle="#316AC5";
myContext.
fillStyle=myContext.
strokeStyle;
myContext.
arc(150, 150, 130, 0 , 2*
Math.
PI);
myContext.
stroke();
myContext.
fillText("0 = 2PI", 150+130+4, 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>
Affichage du sens de rotation et de quelques angles particuliers pour bien comprendre le fonctionnement.