Code source<canvas id="myCanvas" style="padding:10px; background-color:#fff;" width="500" height="200">Balise non reconnue</canvas>
<script type="text/javascript">
var myCanvas=
document.
getElementById("myCanvas");
var ctx=myCanvas.
getContext("2d");
/* Crée l'axe X */
ctx.lineStyle="1";
ctx.
beginPath();
ctx.
moveTo(5,5);
ctx.
lineTo(500,5);
ctx.
lineTo(495,10);
ctx.
moveTo(500,5);
ctx.
lineTo(495,0);
ctx.
closePath();
ctx.
stroke();
/* Crée l'axe Y */
ctx.
beginPath();
ctx.
moveTo(5,5);
ctx.
lineTo(5,200);
ctx.
lineTo(0,195);
ctx.
moveTo(5,200);
ctx.
lineTo(10,195);
ctx.
closePath();
ctx.
stroke();
/* Affiche les libellés des axes */
ctx.
font="14px arial";
ctx.
fillText("(x=0, y=0)",9,20);
ctx.
fillText("x",490,25);
ctx.
fillText("y",12,195);
</script>
Emulation de la console
ExplicationDessine les axes de coordonnées dans le canvas.
Le point (0,0) est en haut à gauche